Font Sizes: Browser vs. Adobe Illustrator August 2010

Due to the differences in appearance of a font created in Adobe Illustrator versus the appearance of the same font in a browser designed for website viewing I decided to create this tool. Quite simply it compares various font styles and sizes by generating the actual font (the way your browser displays it) with an image of that same font as exported from illustrator. So it's actually comparing real text on screen to an image of text. The choosen fonts are those that are common in websites because they are likely to be on most peoples machines; which if you didn't know it already is necessary for viewing a font in html on a webpage.

As you can see there is quite a large discrepancy in the way browsers display fonts compared to how one might view the same size and style font in illustrator. Since website construction best practices dictate that much of the body copy should be html text, this table tool should help designers better gauge how the font will look when the browser draws it on screen.

This tool actually attempts to determine which fonts are installed on your computer. If the font doesn't appear to be installed on your computer it will show up as Sample Font in the list.

Browser Type (arial regular)	Illustrator Type (arial regular)
A 9pt. Font abc 123
A 10pt. Font abc 123
A 11pt. Font abc 123
A 12pt. Font abc 123
A 13pt. Font abc 123
A 14pt. Font abc 123
A 15pt. Font abc 123
A 16pt. Font abc 123
A 17pt. Font abc 123
A 18pt. Font abc 123
A 20pt. Font abc 123
This table compares arial regular generated from this browser vs. arial regular created in adobe illustrator.

Comments