Itqualityassurance
- Why do different typefaces appear at different sizes in the same point size?
- How many font sizes in a design system?
- What is the rule for font size?
- How do you handle font size responsive?
Why do different typefaces appear at different sizes in the same point size?
Both the x-height as well as the cap height of a font affect its legibility, and will make different typefaces look larger or smaller at the same point size.
How many font sizes in a design system?
Systems leverage a type scale to offer core text sizes — often named simply as text or body — that include small , medium , large , and if you need it, xs , xl , and so on. Most systems need three or so (thus, my comfort with using t-shirt sizes).
What is the rule for font size?
Size. In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult.
How do you handle font size responsive?
Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). If you can afford to go a bit larger, then even 21px can be pleasant to read. Headings - The headings should be around 1.96 times larger than your body text to create a sufficient contrast.
