:root{font-size:1vw:}.my-title{font-size:7rem}
above is does the reponsive size of the font depending on the vw
but the is the feasablity of this
tried in one blog type web page
lookgs exaclty from TABLET - LARGE DESKTOP
16 Replies
it's actually an extremely awful idea
with 1 single line, you completely obliterated all chances of a visually impaired person from using your website
and since you arent clamping the size, a phone will have a tiny micro font, while an ultra-wide desktop will have an huge font size
thank you for an amazing feedback
so if figma mockup is at 1440p width given by design person ,
expecting it to be perfect on all screen excluding mobile
it will never be perfect
linux, windows and macos have different font rendering
how am i supposed to design in such a way that i fits almost
just make a normal responsive design
you dont have unlimited horizontal space, but you have vertical
you mean add padding more (XL screen) less(medium screen)
so, make shit vertical, if they cant fit
that too, if you are doing it all by yourself
you can use some global css variables
and change the variables on media queries
so you mentioned above clamp(3rem,1rem+10vw,13rem)
is this how it supposed to be used?
you will have a buttload of headaches and space
yup, minimum value then current value and then maximum value
also, dont put it in the :root, but in the body
yes!
also, style the h1-h6 manually
h1 .... h6
h1,h2,h3,h4,h5,h6 {margin:0}
basic like this and add font-size,weight based on media query right?
use a margin-top
you can use the clamp function as well
but each one should have a different font size
you're welcome
remember: it will never be perfect
yep i have tried most of them
you got any project that needs any work let me know 🙃
how to i mark this solved!!!
got it!!