Font Size Conversion Chart
A chart of font sizes stated in points, pixels, ems, percent and keywords.
|Browser default considered as
These days (2017) It's generically a good idea to allow the device / browser make the base font decisions. As far as I've seen they usually default to 16px but I doubt that applies to an Apple watch.
Responsive Typography directly contradicts this advice as it manipulates the root font-size directly and, from what I've seen so far, it's the way to go.
When setting a font size I mostly use the rem unit, which references the pages root
font-size and eliminates cascade issues. Though in the rare case where I'm relying on the cascade, I fallback to em.
The minimum font size should never be smaller than 10px. And that's for small print, asides, captions, or the like and not body copy itself. I'm very pleased to finally see font size increasing generically across the web.
The best advice I've read for cross-browser, accessible, media queries is to use em units rather than rems or pixels.
Personally I'm very careful with line heights and lengths / widths. Ideal line width for scanning or reading still remains the same at 45—75 characters for paragraphs which works out at 34rem approx.
Line heights should increase as the width decreases, which does sound counter intuitive. With a base
line-height: 1.5 it will only change by ±0.065 between 320px (20rem @ 16px) and 34em (544px @ 16px) so, unless you're a perfectionist, it could be ignored.
Setting the optimal vertical rhythm can be difficult at best. There's a tool called Syncope which provides a calculator to help get the settings right.
height is not set on text blocks. By all means use
min-height but if the user increases the font-size by 200%, for accessibility, a set height is likely to crop the text and the page fails WCAG.
Avoid pixels, especially on widths. Why? Have a gander at Pixels are dead.
A third of your visitors need glasses!
In fact some two thirds of your audience need help viewing websites. Amazingly half of them don't wear their glasses or contacts when browsing online.