Different font sizes

Dimension of a content box may be flexible and dynamic width based on the screen size. We also need different font sizes for different screen.

The following is the CSS I used in this website. I scale the font size for different width explictily.

 1$font-break-point-wide: 900px;
 2$font-break-point-medium: 800px;
 3$font-break-point-narrow: 700px;
 4$break-point: 560px;
 6body {
 7  font-size: 21px;
 8  font-family: Georgia, serif;
 9  line-height: 150%;
11  @media (max-width: $font-break-point-wide) {
12    font-size: 21px;
13  }
14  @media (max-width: $font-break-point-medium) {
15    font-size: 19px;
16  }
17  @media (max-width: $font-break-point-narrow) {
18    font-size: 18px;
19  }
20  @media (max-width: $break-point) {
21    font-size: 16px;
22  }
24  /* iPhone Retina */
25  @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: $break-point), only screen and (min-device-pixel-ratio : 1.5) and (max-width: $break-point) {
26    font-size: 16px;
27  }

We call it adaptive design because we are not scaling the font automatically. Instead, we set the font size based on a certain criteria. The current criteria may mainly rely on the screen size. But actually we also need to consider the screen resolution such as the point-per-inch in the retina display. And the media such as the printing paper. And even the typical distance on how people use that device. For example, when a website is displayed on TV, we are usually feet away from it and we need a larger font-size there.

For example, we used min-device-pixel-ratio and breakpont to define a specific font-size for mobile retina display.

What’s next? We’re going to take a look at “Font size and distance”.

overlaied image when clicked on thumbnail

Makzan | Mobile web design | Table of Content