News Journal

For web developers

Small font sizes

Both the choose a font and the color are very important for a good design.

By Susana deOliveira

What happens when you have to design a card, with small dimensions (300px width) and maintain a 3:5 ratio? I'd been learning for a month, and that was my first project. We were shown a number of font families, such as Roboto (sans-serif), among others. When I finished it, I was excited because I'd managed to create a card with interesting information. You can see the result in the card on the left. ()

The second card is the one I would use to explain to the student that a simple change in background color and a different font, like Verdana (sans-serif) font because is easily readable even for small font sizes, can make a difference. However, it was an excellent project for a beginner, as it clearly shows their understanding of spatial distribution.

And the third card is the one I would have opted for now and I choosed "Helvetica Neue" (sans-serif) font, because it has a more unified structure of heights and widths and improved readability. These kinds of projects are great and remind me that when I buy a packaged product and try to read the ingredients, I often can't and have to ask someone to read it to me. Small font sizes are difficult to handle, so to be legible, the text has to be as explicit as possible.

Three options

Amur tigers

Amur tigers (Panthera tigris altaica) at the Buffalo Zoo.
The pattern of the stripes is unique to each specimen, it is a bar code!
  • Habitat: Asia
  • Healthy habits: The tigers like water.
  • Diet: Varied
  • Vision:Binocular

The tigers are a good swimmer and enjoy with a good water bath. They are the largest of the cats and like them, they have a certain vision of color. Its pelage is orange crossed by stripes of shades ranging from dark brown to black. The shape and quantity of the stripes vary according to sex. And maybe, the stripes, practically verticals, were the inspiration for creating barcodes.

Amur tigers

Amur tigers (Panthera tigris altaica) at the Buffalo Zoo.
  • Habitat: Asia
  • Healthy habits: They like water.
  • Diet: Varied
  • Vision: Binocular

The tigers are a good swimmer and enjoy with a good water bath. They are the largest of the cats and like them, they have a certain vision of color. Its pelage is orange crossed by stripes of shades ranging from dark brown to black. The shape and quantity of the stripes vary according to sex. And maybe, the stripes, practically verticals, were the inspiration for creating barcodes.

Amur tiger

Siberian tiger

[You can see the origin of the photograph through the following link Wikimedia Commons]

Attention: Maybe, you see differences in the sizes of the postcards, this is because Verdana font was designed to be highly legible on low-resolution screens, resulting in a larger on-screen appearance than other fonts, even at the same point size.


CSS line-height Property

The property specifies the height of a line.

If you look at the cards again, the first has a font-size: 12px and line-height:normal; the second has a size of 12px and the same value for line-height; the third has a size of 15px and a line-height:1.5 for the largest paragraph. The line-height property adds space above and under the text, therefore affecting the height of the text container.

A line-height: normal with font-size: 16px, then the height is 16 x 1.2 = 19.2px

A line-height: 1.5 with font-size: 16px, then the height is 16 x 1.5 = 24px

[When the screen size decreases, the height and width of a container are adjusted. The text is divided into two or more paragraphs, so the height of the container is multiplied by the number of paragraphs it contains. Obviously, each new line retains its initial height, which is 19.2px or 24px (measurements used for this example). Resize both the height and width of the container with the two paragraphs to see what happens.]


And, the width and height of the boxes also vary depending on the font. The 16px size is shown below, for different font families with line-height property sets normal.

This is an example of a serif font.

This is an example of a sans-serif font.

This is an example of a monospace font.

This is an example of a cursive font.

This is an example of a script font.


There are also differences, even within the same family, which are best appreciated when we increase the size. For example, within the serif family, we choose: Georgia, Garamond (I used it for paragraphs), and Times New Roman (I used it for headlines on this page).

A a 01234567
A a 01234567
A a 01234567

[font-size: 80px; line-height: normal; padding-inline: 10px;]

[font-size: 40px; line-height: normal; padding-inline: 10px;]

Or within the sans-serif family: Geneva, Segoe UI, Helvetica Neue (I used it for quotes).

A a 01234567
A a 01234567
A a 01234567

[font-size: 80px; line-height: normal; padding-inline: 10px;]

[font-size: 40px; line-height: normal; padding-inline: 10px;]

For fonts of the same family, there are variations in how they are distributed in their boxes; some are centered with respect to the horizontal axis of the box, others have greater width and height. With these examples, we can also see the difference between the different families, as we already observed for the small sizes.

Font Substitutions: iOS, like other operating systems, performs font substitutions when a requested font isn't available. If an app or webpage requests a font that isn't installed, the system might display a similar font like Helvetica or Arial in its place. Segoe UI is designed for Windows and is not available on iOS by default. Geneva are not seen as equal on iOS because Geneva was an earlier font for Macs and not the system font in iOS.

Choosing a font that is easy to read is important, but, it is also important to choose a good color and size for your font.