Full Width Dynamic Text Size
Any ideas on how I can do this without using JS?
11 Replies
I think just with magic numbers
how to find them
Try stuff till it doesn't break. You can use calc with something like
calc(1.5vw+1.5rem). Make sure to include a rem component though, so it stays accessible for folks who change their default font sizeuhm
and how do I make it responsive
as far as I understand, If I change the copy, it will break, right?
The vw component should help, but at the end of the day you'll probably need media queries
no problem in using media queries
but the font size represents the height of the font
how does one use vw then
wouldn't this break if the user has a different root font-size tho?
That's preferable over the site ignoring user preference
think the only way is to make it an svg
The idea behind the magic number is finding the ratio of width to height, but this doesn't take into account kerning, and the width of characters are not identical unless you use a fixed width font.
wont be able to copy it though