Sherri Wyche Fleming Web and Graphic Design

Font Size Conversions

These font size conversions are all approximate but at least give you a quick look to see the general size conversion. You can then tweak it more if needed.

Keep in mind that the font size conversion visual chart only works for fonts as they appear on the computer screen in a browser window. The font size conversions will not likely translate to print nor translate to other programs as other programs will have their own default font size and thus could potentially start from a bigger or smaller font as default throwing off the comparison charts for that program. Case in point, Photoshop will display point sizes differently than a browser will. Thus designers designing for the web using Photoshop will need to know that specifying PTs to developers will not be pleased to find their font sizes will be off once the page is in a browser.

The font family used in the font size conversion chart below is Verdana. The conversions should work for other font families as well.

Yahoo!'s document on font normalization can be found here.

This page and the work I have done for font size comparissons in the visual chart below are copyright Sherri Wyche Fleming. If you have any questions or requests for a font conversion that is not listed below, please contact me.

Special note: Photoshop (at least the PC version) displays PT differently than browsers. I've created the comparison table here. All Photoshop graphic screen shots are using regular weight, 0 tracking, auto leading (line-height), vertical and horizontal scale 100%, 0 baseline shift and "none" for anti-aliasing. I have not yet tested differences in default for weight, leading, scaling, letter spacing and word spacing, nor tracking and baseline shift.

You will notice that the equivalent Photoshop PT and PX size are the same in text height and seemingly at weight on the PC. But the PT in Photoshop and PT in the browser are vastly different. Thus when working across teams where the designer and HTML/CSS developer are different, ensure that the developer knows to not use PT in the CSS and to convert it to PX or EM etc instead of a 1 to 1 of PT.

Photoshop PT equivalent Point (PT) Pixel (PX) Millimeter (MM) M width (EM) Percentage (%)
7 PT 9 PX 2.5 MM .6 EM 60 %
7 PT 10 PX 2.5 MM .6 EM 60 %
8 PT 11 PX 2.8 MM .7 EM 70 %
9 PT 12 PX 3.4 MM .8 EM 80 %
9 PT 13 PX 3.4 MM .8 EM 80 %
10 PT 13 PX 3.4 MM .8 EM 80 %
10.5 PT 14 PX 3.6 MM .85 EM 85 %
11 PT 15 PX 3.9 MM .95 EM 95 %
12 PT 16 PX 4.2 MM 1.05 EM 105 %
12 PT 17 PX 4.2 MM 1.05 EM 105 %
13 PT 17 PX 4.2 MM 1.1 EM 110 %
13 PT 18 PX 4.8 MM 1.1 EM 110 %
14 PT 19 PX 5 MM 1.2 EM 120 %
15 PT 20 PX 5.4 MM 1.33 EM 133 %
16 PT 21 PX 5.8 MM 1.4 EM 140 %
16 PT 22 PX 5.8 MM 1.4 EM 140 %
17 PT 23 PX 6.2 MM 1.5 EM 150 %

Photoshop PT vs Browser PT

Photoshop PT Browser PT
7 PT
8 PT
9 PT
10 PT
11 PT
12 PT
13 PT
14 PT
15 PT
16 PT
17 PT
18 PT
19 PT
20 PT
21 PT