HomeHelpful ResourcesAll About FontsFont Size Conversion Chart

3.2. Font Size Conversion Chart

Font Size Conversion Chart
PointsPixelsEmsPercentKeywordDefault sans-serif
6pt 8px 0.5em 50%   Sample text
7pt 9px 0.55em 55%   Sample text
7.5pt 10px 0.625em 62.5% x-small Sample text
8pt 11px 0.7em 70%   Sample text
9pt 12px 0.75em 75%   Sample text
10pt 13px 0.8em 80% small Sample text
10.5pt 14px 0.875em 87.5%   Sample text
11pt 15px 0.95em 95%   Sample text
12pt 16px 1em 100% medium Sample text
13pt 17px 1.05em 105%   Sample text
13.5pt 18px 1.125em 112.5% large Sample text
14pt 19px 1.2em 120%   Sample text
14.5pt 20px 1.25em 125%   Sample text
15pt 21px 1.3em 130%   Sample text
16pt 22px 1.4em 140%   Sample text
17pt 23px 1.45em 145%   Sample text
18pt 24px 1.5em 150% x-large Sample text
20pt 26px 1.6em 160%   Sample text
22pt 29px 1.8em 180%   Sample text
24pt 32px 2em 200% xx-large Sample text
26pt 35px 2.2em 220%   Sample text
27pt 36px 2.25em 225%   Sample text
28pt 37px 2.3em 230%   Sample text
29pt 38px 2.35em 235%   Sample text
30pt 40px 2.45em 245%   Sample text
32pt 42px 2.55em 255%   Sample text
34pt 45px 2.75em 275%   Sample text
36pt 48px 3em 300%   Sample text

 

Using keywords simplifies sizing for mobile devices which have set limited font-sizes. Most modern browsers reproduce a very similar keyword size cross-browser. IEv6- gives the biggest size discrepancy but personally I considered that acceptable.

For accessibility reasons I suggest the minimum body content font-size to be Arial, Verdana or Helvetica at 75% / 0.75em / 12px / 9pt. With a decent amount of line height 140% - 150%.

If you are using very small fonts, 10px or less, I advise using Verdana as it's actually designed to work at small sizes. At larger sizes Arial appears to be clearer.

There is a common practice where the body element is set to 62.5% which has the effect of equating (sort of) em to px. For example: 1em = 10px; 0.8em = 8px, and 2.5em = 25px.

source: http://websemantics.co.uk/resources/font_size_conversion_chart/

Knowledge Tags

This page was: Helpful | Not Helpful