Responsive Web Design
Typography
Viewport tag
The viewport meta tag prevents mobile devices from displaying pages as if they were at desktop resolutions.
<meta name="viewport" content="width=device-width, initial-scale=1">
Setting the viewport width to the device width and the initial zoom level to 1 allows the page to match the screen’s dimensions and scale the content appropriately. Without this, mobile browsers may render pages at a desktop screen width then shrink it down, leading to an overly small text size.[1]
Responsive text
Set the font size as 15px plus 0.0039065% of the screen width. This should yield optimal font sizes at every breakpoint, e.g. 16px @ 320px width, 20px at 1280px width, etc.[2]
body {
font-size: calc(15px + 0.390625vw);
}
Responsive website font size guidelines
Guideline for website font sizes - Learn UI Design[3]
Reference
Sources
- ↑ How to Scale Fonts Responsively with CSS for Different Screen Sizes - sikiru on Medium.com
- ↑ Responsive Font Size (Optimal Text at Every Breakpoint) - Matthew James Taylor
- ↑ Guideline for website font sizes - Learn UI Design