Optimal font sizes for desktop

There are no exact rules for font sizing, but there are some generally good practices to think about :

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. This would mean that if you use for body font18px => 35pxfor headings.

Subheadings — slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For Heading 35px => 30px for the subheading.

Input fields — closely match the body text’s rules.

This should describe the page’s topic

This is an H2 subheading

This is another H2 subheading

This is an H3 subheading

This is an H4 subheading

This is an H5 subheading

This is an H6 subheading

Type Size

Traditional typographic scales exist to help designers get started. But these are only a starting point, and designers should feel free to experiment with different weights and styles while deviating from these traditional scales. Most base their scale on the size of the body text and expand from there.

The classic typographic scale from The Elements of Typographic Style are familiar to most designers as they tend to be the defaults most word processing programs offer when selecting font sizes. The scale is:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, and 72.

https://spencermortensen.com/articles/typographic-scale/

https://type-scale.spencermortensen.com/6/2.5/1/1.125em/Roboto%20700/Source%20Sans%20Pro

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus in hac. In arcu cursus euismod quis.