Sun, 2016-01-31 07:53
I just recently was working on a site what had its fonts set like so:
h1 { font-size: 4vw; } h2 { font-size: 3vw; } p { font-size: 1.5vw; }
Now i noticed a few issues with this approach:
- The fonts unlike em's , rems and fixed width units like px , scale based on viewwpoints , now thats great , but has a huge drawback ,
the fonts that look good at 992px will scale to be so tiny at 448px width that they would hardly be visible.
- If you were hypothetically working for a design company where the fonts size of the site has to be pixel perfect and say the h1 size of your design is 35px ,
how the heck on earth are you going to say 4vw = 35px ? is it possible to accomplish pixel perfection with vw, vh and company ? With em's you still can cofidently
code yor font sizes and know that they won't suddenly become tiny or will atleast be of a certain size. the below strategy has often worked for me.
body { font-size: 16px; } h1 { font-size: 3em } .bigFont { font-size: 1.56em; }
the above code gives me close to pixel perfection , Now i know setting body to 100% is whats ideal , Unfortunatly i don't have the luxury of doing that 
can i acheive something like the above with vw , vh and company ?? or where these units just not created to deal with situations like above ?
Also one critical downfall i noticed with using such font sizes is that , multiple viewpoints they look completely different, hence i have to use
multiple media queries. so using such units kind of becomes counter productive .
h1 { font-size: 4vw; } h2 { font-size: 3vw; } p { font-size: 1.5vw; } @media (max-width: 992px) { // set font sizes for h1 , h2 , p and so on again Here ..................... } @media (max-width: 768px) { // set font sizes for h1 , h2 , p and so on again Here ..................... } @media (max-width: 448px) { // set font sizes for h1 , h2 , p and so on again Here ..................... }
Now the irony is that even after you've done the above you're still not guaranteed that you're font size will be the size you what it to be at a given viewpoint.
All of the above make me kind of rethink if vm and co. were actually added to CSS to set fontsizes or where they invented for other purposes .
I have no idea. can somebody please tell me then what would be the use cases for vw and co. ?
Sun, 2016-01-31 08:46
#1
You got me
Where are the specifications for those units? I think I've seen mention before. But because what you're describing makes no sense to me in any case of using Best Practice, I've never given it a second's thought.
IMNSHO, any "Design company" that specifies fixed sized fonts, e.g. px, in, pt, &c. has incompetent designers. It flies in the face of accessibility and responsive presentation. There is no such thing as "pixel perfection" on the web. It is a print meme.
cheers,
gary
Sun, 2016-01-31 18:51
#2
What i meant by pixel perfection was ...
IMNSHO, any "Design company" that specifies fixed sized fonts, e.g. px, in, pt, &c. has incompetent designers. It flies in the face of accessibility and responsive presentation. There is no such thing as "pixel perfection" on the web. It is a print meme.
Sorry , what i meant by pixel perfection was that, that desktop widths atleast's The fonts render at a predictable size !! and then scale down as you scale the screen , so u'll probably have code like:
body { font-size: 16px; } h1 { font-size: 3em; } @media (max-width:448px) { font-size: 1.8em; }
My complaint about using VW's is , i don't think they should really be used for font sizes ... maybe they have another use cases. having fixed font sizes is bad ...... having unpredictable font sizes is equally bad.
Sun, 2016-01-31 23:44
#3
Oh?
And what about the visitor that needs, and has configured his browser to a default font size of 20px? No, a good graphic designer lets the user control the base font size. That doesn't mean the font sizes are unpredictable, it means they are proportional to the base. Does that cause a problem with the designer? If so, the designer doesn't know what he's doing with web design. He needs to put in some study or go back to printed page design. Good web design accommodates the user, not the designer's own ego.
Your treatment of the heading element is ok, but by setting the initial em value to 16px, while it is the common browser default, screws over the users who prefer a different size.
Fixed font sizes can also cause issues with those whose monitors have resolutions different from 96px/in.
cheers,
gary
Mon, 2016-02-01 04:53
#4
Thanks but ....
You've mention this to me before that the body font size needs to be set to 100% .. 
Fixed font sizes can also cause issues with those whose monitors have resolutions different from 96px/in.
Wow !! never gave this a taught , can you emphasis on this , what do u mean by resolutions different from 96px/in ? and what kind of issues ?
Mon, 2016-02-01 17:27
#5
Consider,
An acquaintance of mine has 120px/in resolution. He has to start zooming each time someone sets the font size to, for example, 16px. Now that works for a great majority of monitors, but on his, it's too small. On most browsers, that's 6 ems per inch; on his it's 7.5 ems per inch.
Older Macs had the opposite problem. They were aimed at print. Their resolution was 72 virtual px/in so that it equaled points and picas and all those print measures. That 16px font displayed a third larger than expected.
The easy solution? Set your base font size to whatever the user has. My friend's default size is 20px. My own monitor's rez is 106px/in, so that 13px font is marginal for me.
You don't have to use 100%, but you should have a damned good reason to do otherwise.
gary
Thu, 2016-02-04 14:01
#6
Very interesting !
I taught the default of 16px was a given except in cases of the user changing it for accessibility or on mobile devices 
Thanks. what you said was immensely useful ! .
I have some more things to say about VM and co. , i'll come and post it back whenever i have the time , as my boss has dumped me with alot of work now 
