Web Typography Font Sizes

Composing to a Scale.

Web typography font sizes. As a rule of thumb set your main heading H1 to twice the size of your body font. A good idea is to size everything in pixels first and then convert the measurements over to ems. The webs default font size for paragraphs is 16px but the most common sizes used on the internet are 12px 13px and 14px.

What is good typography. Experiment with font size scale and different webfonts. I recommend never going below 14px for body text as anything less can make for tough reading.

The font size on a website should be responsive to the screen size that displays it. Beautiful Web Typography font-size controls font sizes. This can make em sizing calculations for nested elements difficult.

In the example on the right the body font size is 18px changed it to 1125 with a media query heading 1 is 72px 4 18 and heading 2 is 36px 2 18. If you used a 12-pixel font size then your line height will be 18 pixels 12 pixels 15 em 18 pixels. The fun starts at 1335.

In general a font should be 12-16pt on a mobile screen 15-19pt on a tablet and 16-20pt on a desktop computer screen. Here we set our base font size to match the browsers default font size usually 16px. A good rule of thumb is to select a comfortable size for type.

For mobile devices you should go for 3040 characters per line. The first one uses 5075 characters per line optimum number of characters per line for print and desktop while the second one uses the optimal 3040 characters. It also fully supports the use of a title font being twice as big as the body font size.