How is the font size calculated in pixel sized documents?

Question

Hello to all,
I am working with Illustrator CS4 on a web design. In the document setup, I set the size to 1000*1600 pixels. Then, I tried to add some text in font size 12 pt. The font appears *very* small. My objective was to use the same font size settings in my Illustrator file as I will later do in the HTML/CSS coding. How do I get Illustrator to scale the fonts in the same way as the browser does - i.e. a 12 pt text in the browser has the same size as a 12 pt text in Illustrator? Infact, I am looking for a setting where I can define the resolution of text size calculation.
Best regards
Joerg

Answer 1

Illustrator is a print-oriented, object-based vector drawing program, not a web-oriented, pixel-based raster painting program.
Illustrator's ruler is designed to represent real-world measure, not counts of pixels.
A pixel is not a measure. Pixels have no real-world measure.
Therefore, when Illustrator's ruler pretends to represent "pixels," it has to assign some real-world scale to them. It defaults to the measure of a point. A point is a real-world measure.
Similarly, a computer's operating system has to decide how many screen pixels it will use to represent a real-world measure at 100% zoom.
Mac OS defaults to using 1 pixel to represent 1 point. (72 PPI)
Windows and web browsers default to using 1.33 pixels to represent 1 point. (96 PPI)
So tell a browser to display 12 point type, and it will use 16 pixels to do that.
Given Illustrator's default that 1 pixel measures 1 point at 100%, Illustrator uses about 9 pixels to render the cap height of 12 point Verdana.
GIven the browsers' default that 1 point renders to 1.3 pixels, the browser uses about 12 pixels to render the cap height of 12 point Verdana.
So given that Illustrator and the browser are going to use different numbers of pixels to rasterize 12 point type, how do you get a browser to use the same number of pixels to render 12 point Verdana as Illustrator does? Simple: Specify the type size in the HTML code by pixels, not by points. This is a screenshot of Internet Explorer on Windows displaying a web page which contains:
A raster image of 12 point Verdana exported from Illustrator, using its default 72 PPI rasterization
Live 12 pixel Verdana HTML text.
Live 12 point Verdana HTML text.
Inversely, there are other ways to work around Illustrator's 72 PPI default when you want to rasterize Illustrator type so that it looks the same as the same-point-size text in HTML.
When using Save For Web & Devices, specifiy 133% instead of the default 100%.
Scale the artwork to 133% before exporting via Save For Web & Devices using the default 100%
When rasterizing, rasterize to 96 PPI instead of 72 PPI. (1.33 as many pixels)
When exporting, export to 96 PPI instead of 72 PPI. (1.33 as many pixels)
Or, do what I do: Get a decent screenshot utility. When I want to rasterize something from Illustrator that contains text that I want to appear online at the same scale that it appears to me when working in Illustrator, I simply zoom to 133% and take a screenshot.
JET