Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
You'll usually find yourself over-complicating your code adding extra media queries when using relative measurements for font-size property and still you (and your users) will face issues.
Why? Browsers deal with pixels in relation to the rendered pixels by the same browser.
That means that, on a phone, let's say a Google Pixel 5, which has 1080 x 2340 pixels, you'll see 393 x 851 pixels in your screen, that's due to the density (~432 ppi).
So when you declare:
font-size:16px;
It will render properly and accordingly to the device rendering it and most important, it will take in mind the user preferences configured on the device.
i.e. When using pixels, if the user has the size configured at 125% on it's device, it will do something like calc(16px*125/100) = 20px.
Relative fonts on the other hand, rely on viewport size, hence ignore the device preference configuration.
In-page Zoom (Ctrl++) or (Ctrl+mouseWheel Up) also ignore zooming on relative sizes (you can test it in your own codepen).
Las but not least, 8vw means 8% of the viewport width, which means it will be afected by aspect ratio, thus behaving different in a desktop monitor (16:9) than in a smartphone in portrait (usually 9:19 to 9:21).
TL;DR:
Scaling on fonts is based on strict units and won't work on relative ones. Using relative units cause more problems than benefits, specially accessibility issues, you should not do that.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Answering the question in the title:
You'll usually find yourself over-complicating your code adding extra media queries when using relative measurements for font-size property and still you (and your users) will face issues.
Why? Browsers deal with pixels in relation to the rendered pixels by the same browser.
That means that, on a phone, let's say a Google Pixel 5, which has 1080 x 2340 pixels, you'll see 393 x 851 pixels in your screen, that's due to the density (~432 ppi).
So when you declare:
It will render properly and accordingly to the device rendering it and most important, it will take in mind the user preferences configured on the device.
i.e. When using pixels, if the user has the size configured at 125% on it's device, it will do something like
calc(16px*125/100) = 20px.Relative fonts on the other hand, rely on viewport size, hence ignore the device preference configuration.
In-page Zoom (Ctrl++) or (Ctrl+mouseWheel Up) also ignore zooming on relative sizes (you can test it in your own codepen).
Las but not least,
8vwmeans 8% of the viewport width, which means it will be afected by aspect ratio, thus behaving different in a desktop monitor (16:9) than in a smartphone in portrait (usually 9:19 to 9:21).TL;DR:
Scaling on fonts is based on strict units and won't work on relative ones. Using relative units cause more problems than benefits, specially accessibility issues, you should not do that.
Hope it helps somehow,
See you!
Great explanation! Thanks for sharing!
You're welcome! 🤗