On Fonts and High Resolution Displays

by cdwise 16. December 2012 21:33

I was looking at a site someone posted asking for display assistance this morning. While the issue they were having wasn't related to fonts I noticed a few things that I felt needed to be addressed when it came to their use of fonts. As I was writing my reply it occured to me that the font issue that I saw was a fairly common one, especially with people who have been creating sites for some time and do so primarily as a hobby. They have used a program they are comfortable with and may or may not have upgraded to newer versions over the years but have kept the same basic method designing their sites.

Back around 2000 or so many well respected designers were recommending that designers use pixels because of how different browsers rendered fonts at keyword and number sizing and the issue of computers not always having the same PPI settings. Back in the "old" days Macs were 72ppi and resolution was dependent on physical screen size. That was so you could hold a printer's ruler up and measure the type on the screen for printing. Windows computers were 96ppi and resolution was independent from screen size so you could have a 15" monitor that was either 800x600 or 1024x768. So in order to get a consistent look and feel people would either resort to pixels or would use a math forumula to set the base font size to a number that resulted in the the same display size then scale text based on that (.67% base font then body text would be something like 115% to make it the equivilent of 10pt type for example.) Since it was simplier folks who aimed for that "pixel perfect" cross browser/OS site would simply use pixels.

These habits were formed when most computers had a screen resolution of 1024 on a 15" monitor or 1280 on a 17" monitor. In the last few years and particularly in the last 18 months there has been a major change in screen resolution comparable to the change when people moved from CRT screen to LED screens and laptops became affordable. The last 4 years or so we've seen the proliferation of small portable devices like the iPad, various Android based tablets and now Windows RT not to mention cellphones for web browsing. All of these have as high or higher screen resolutions than the traditional desktop or even laptop computer.

The new Sony Duo I just picked up has a pixel density is 209 to the physical inch. A 15" MacBook Pro with Retina display is 220ppi. Heck, even a computer I have here that is 6 years old has a ppi of 148. The iPad 3+ has 264ppi.

Microsoft and Apple set the default ppi on their operating systems to 96pp per inch. However, newer high resolution displays don't use the default "normal" setting. On my new Sony it was set to 120% or 20ppi which I have bumped up a bit to 135ppi so I don't have to use reading glasses.

Internet Explorer will not scale either points or pixels which means that the only option for people using those high resolution screens would be to zoom the entire page which would pixelate your images badly.

The page I was looking at had the font size specified in pixels not points, ems or percentages. With today's high density screens pixels are simply a bad idea. Let me give you a few examples:

Size Text
1 12pt Now is the time for all good men.
2 12px Now is the time for all good men.
3 1em at your OS settings Now is the time for all good men.
4 1em OS normal fonts Now is the time for all good men.
5 1em OS large fonts Now is the time for all good men.

If 1,3 and 4 are the same size then your computer is using system defaults in Internet Explorer. Since Firefox doesn't honor OS ppi settings and I had to convert "normal" and "large" fonts to their pixel equivilents for this demonstartion to work in a browser note that Firefox wshoul show 1, 4 and 5 all the same size.

To see what the effect of changing text size is you should test it for yourself. You can do that by either changing the text size only in your browser and looking at the text above or copying it to a separate page in your web editor of choice and loading it in the browsers you wish to test. To change text size instead of zooming:

Internet Explorer go to View > Text Size and select anything other than your current setting
Firefox go to View > Zoom > Text Size Only

I'm not on a computer with Safari or Chrome installed to give you those instructions right now so you'll have to find it in those yourself.

Font Choices

The other text issue that I saw and is possibly even more common is having only one font family set - Verdana. Verdana is only available on Windows machines and Macs with Office installed. Verdana is a font designed for the web and has a larger x/y ratio than any other font that I know of. If the visitor doesn't have Verdana available the default system font will be used which is typically either Times or Arial. Let me show you what that means in terms of relative font size. The first is Vedana as I saw specified followed by Times then Arial. The last is what I recommend instead of using Verdana.

Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.

See the difference? One reason that many people use a smaller font size setting than the OS default is because Verdana is so much larger than other fonts. So they set it to 10pt instead of the default 12pt equivilent which means that if someome doesn't have Verdana their text may be too small to read comfortably. Let me show you what happens when someone sets a small font size because they are using Verdana when Verdana isn't present. Pay particular attention to what happens to the Times/Times New Roman font.

Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.

The first line is OS default for the font family group I typically use of  "font-family: "Tahoma, Geneva, sans-serif;"  Tahoma like Verdana is a font designed to be used on the web and is included in Office. Geneva is the closet Mac native font for those that don't have Office installed and sans-serif will at least get you the OS default for that generic family, usually Arial. The x/y ratio of Tahoma isn't that much of a dep

I'd suggest you change your font sizes to ems or percentages. As a general rule converting from older screen resolutions to modern high definition screens you would use 16px = 12pt. That would be the system default for both Windows and Macs at "normal" settings which is the appropriate comparision. When I was computer shopping I discovered that all of the high resolution computers I looked hat came were set to 120ppi instead of the Windows default of 96ppi. So folks buying htem may not even know that their ppi is different, all they notice is that their text is crisper than it was on their older computer. Others may still change their ppi settings to something even higher. For example my new system is set to 135ppi instead of 120 or 96 so I can use it without reading glasses.


With the rise in mobile devices and laptops with high resolution screens in ever smaller form factors the use of pixels for specifying font sizes time has past. Now that people are accessing the web using everything from a smart phone with retina (Apple) or other high pixel density screens to "smart" TVs and set top devices (Samsung, Roku, others), game consoles (xBox, wii, Playstation), tablet pcs (from low end 800x600 android devices to HD screens running Android or Windows 8 or iPads with or without retina displays) to Ultrabooks/laptops to desktop PCs you need to font family groups with scalable fonts.

The most common style I use is:

body { margin: 0; padding: 0; font-family: Tahoma, Geneva, sans-serif; }


Comments (1) -

website template 2013
website template 2013
12/20/2012 12:21:40 AM #

I think as the pixel density or resolution on screens keeps getting higher, I agree you most definitely need font family groups with scalable fonts or else its going to get real messy!

website for makeup artists http://www.webonlinetemplates.com/

Comments are closed

Outstanding Hosting