I'm designing a webpage using font-size: calc(26px - ((26 - 16) * (1600px - 100vw) / (1600 - 300))); for font-size interpolation, but the problem is, I'm not comfortable with the maximums (26px, 1600px) and minimums (16px, 300px) of the chosen font-sizes and view port widths respectively. What are the recommended font-sizes for different screen widths?
Recommended font size for certain screen width
Viewed 408
2 Answers
Font sizes should never go under 16px. It will make life harder for older ones and people with eye problems.
You don't need to use those complicated calculations. Instead, you can use min(), max() or clamp()
Beware: These functions are relatively new (especially clamp()). Check this link out to see browser support.
min() Lets you to choose minimum and recommended font-size:
min(18px, 2vw) /* It will use minimum of those two */
max() chooses between two values and uses bigger one:
max(18px, 2vw) /* If 2wv becomes smaller than 18px, it will not use it */
clamp() Is combination of those two. You can choose minimum, regular and maximum font value:
clamp(18px, 2vw, 50px) /* If 2wv becomes smaller than 18px, it will not use it. If 2vw gets bigger than 50px, it will stay at 50px */
Learn more:
Well, there isn't really a 'rule' about maximum font-size. This depends on the nature of the context and word-count. You can also play around by making the first paragraph bigger or even bolder to introduce to the text and make it a small summary.
The main concern is the minimum values. iOS tends to zoom in any paragraph of web-content that below the 16px mark. This count for the main body content. The Google Material Design UI also recommends to use 16px as minimum body text-size. 16px mimics the normal size of a book page.
Minimum for desktop can be between 16-18px, what seems to fit the style the most.
Some recources:
https://material.io/design/typography/the-type-system.html#type-scale
https://w3-lab.com/web-design/how-big-should-a-font-be-on-a-site-rules-of-typography/
Related