I wanted to know how fonts that are popular with designers would look like on the web. Can you just convert those fonts to a webfont and put it in your website? I had mixed experiences with free fonts. But hey, they’re free. Maybe the those fonts you paid a lot of money for can do the job.

When designers realize that web browsers can load any font, they will try to push the limits with trying new fonts and web developers will certainly be pressured to convert a Gill Sans or Garamond into a webfont. License or no license. Especially since they are able to create fonts that contain just a subset of the original characters. That makes it unfit for people who hope to get a professional font for free by just downloading the font file from a website.

The test procedure

Please don’t pin me on not having the right Helvetica or Garamond. I’m not familiar with the subtleties between different version and foundries. I converted the selected fonts with Fontsquirrel’s fontface generator. The result is viewed in the following browsers:

• Firefox 3.5.7 or 3.6 RC1 on Windows Vista
• IE8 on Windows Vista
• IE6 on Windows XP
• Safari 3.12 on Mac OS X Leopard. Since I don’t own a Mac I used the service of Browsrcamp.com.

Fontsquirrel generates a preview text in different font sizes. I used that list of predefined font sizes as my check list. So I tested these font sizes:

9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

As you see there are enough other font sizes that might work as webfont. This test is not intended to be absolute and complete. I want to see how professional fonts behave as webfonts and what the typical font render problems are in browsers.

Helvetica

Definitely an all-time favorite. Apple computers have a Helvetica installed by default, but Windows does not. The Helvetica that I used for this test renders reasonably. Check out the screenshots for Firefox, IE8, IE6 and Safari. I also have the screenshots of the italic fonts for Firefox, IE8, IE6 and Safari. There are enough rendering glitches, though:

Some chracters are combined in Firefox (Windows Vista) at 11px.

The kerning of the 'e' is off in IE8, Vista at 15px.

Some characters seem to have a cap at font sizes 14, 16 and 18px in IE8 Vista.

Another kerning problem: the top is cut off in IE8 at smaller font sizes.

IE6 on XP SP3 is doing better than IE8 Vista, but vertical lines are over-emphesized at smaller font sizes and the text is very grey.

Looking in all four browsers, we get this list of usable and unusable font sizes.
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Garamond

Screenshots of Garamond in Firefox, IE8, IE6 and Safari.

There were lots of Garamonds to choose from. Don’t pin me down on not having the right Garamond of the right vendor. The errors that I encountered here are of more importance than the difference between different Garamonds.

With Garamond we can clearly see the strange font rendering that can happen in Firefox It’s almost as if it tries to add some creative touch to the font and fails. Take a look at the images below. Some characters are very different from the original font design, not? These rendering oddities also occur with the type Fontin Sans, that’s used on this website. It means that I cannot use some font sizes because some characters look weird.

Firefox PC: the character 'q' in different font sizes appear very different from each other.

Firefox PC at font size 13px: note the odd 'g' and the uneven distribution of space in the 'm'.

IE8 is even worse, Mostly because of bad kerning, I’d only use this font if the size is 48 pixels or larger. Look at the images below to see what IE8 does with text in large font sizes like 36px and 60px.

IE8: Because of bad aliasing and bad kerning the 'e' even looks bad at a font size of 36px!

IE8 again: Although I think it's more or less acceptable, the capital 'T' definitely needs more anti-aliasing at the top.

Garamond file size

My Garamond font file is very large to be a webfont by the way: 343Kb. That really asks for removing some characters. If I omit support for Greek, Coptic and Cyrillic, I can scale the file size back to 112 Kb. If I choose to only support Basic Latin, Latin-1 Sup, Currency Symbols and Punctuation, I end up with a file size of 82 Kb. Then you’ll have just one font style of the font family. If you want to have text in Italic, you have to double the file size.

Garamond font size

If you want to use a Garamond, you’ll have to use a much larger font size. That’s because the height difference between uppercase and lowercase in a Garamond is larger than the standard Arial. You need a 16px Garamond to get lowercase text that is of equal to that of a 12px Arial. In case of Helvetica it’s 13px by the way.

So we get this list of usable and unusable font sizes:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72:

Dax

Screenshots of Dax in Firefox, IE8, IE6 and Safari.

Dax is, to my surprise, doing a pretty job as a webfont. Almost no strange kerning in IE8 and almost no creative font interpretation in Firefox. For some reason are font sizes 21 and 24 bad for all characters, but other font sizes are doing well with the exception of a few characters.

Firefox 3.6 PC: FF and IE8 both have trouble with the diagonal line in the 'e'. At various sizes it looks like a staircase.

Firefox 3.6 PC: Both IE8 and FF have trouble font size 21 and 24. Note that the lines do not always have the same thickness.

So we get this list of usable and unusable font sizes:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Gill Sans

Screenshots of Gill Sans Regular in Firefox, IE8, IE6 and Safari.
Screenshots of Gill Sans Bold in Firefox, IE8, IE6 and Safari.

Gill Sans Regular looks relatively nice. There are enough font sizes to choose from. Let’s focus on some rendering issues:

Another example of the 'creativity' of Firefox. You see some text in font size 16 and 17. Note the 'o' and 'e' on the top line that look like flat ellipsis instead of perfect circles.

IE8 Vista: Font size 14 looks nice. Except the captital 'T', which is too thick.

IE6 on XP SP3 does too much anti-aliasing, so that text in small sizes become almost a grey blur. Using a bold style can really make a difference.

Usable and unusable font sizes for Gill Sans Regular:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Usable and unusable font sizes for Gill Sans Bold:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Bodoni

Screenshots of Bodoni Book in Firefox, IE8, IE6.
Screenshots of Bodoni Book Italic in Firefox, IE8, IE6.

IE8: Even at large sizes the small lines tend to be troublesome. Note the broken lines in the 'o', 'e', 'p' and 's'.

The grey blur of IE6

Bodoni renders badly. As I expected. The thin lines in serif fonts prove to be troublesome in webfonts. This is mostly due to the anti-aliasing of IE8 that is way too sharp. The italic font style has a even worse legibility.

Usable and unusable font sizes for Bodoni Book:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Usable and unusable font sizes for Bodoni Book Italic:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Conclusion

Phew! that’s a lot of data. So what does it all mean? Well, for starters we now know for sure that you have to check your font in different browsers and eliminate the font sizes that render badly before you start to design. This and other tests seem to show that it’s best to only use simple, sans-serif fonts. That’s because variation in thickness and diagonal lines prove troublesome in webfonts. Especially in IE8 on Vista because it’s very sharp anti-alias. It’s so sharp that the fonts look jagged.

Fonts in Firefox don’t look jagged and look great in very large sizes. The trouble is the ‘creativity’ in the rendering. Characters can be wider, smaller, higher or lower than intended. In some cases it can change the complete look of a font.

The anti-alias in IE6 on Windows XP SP3 is in most cases way to strong. Most black text is printed grey at smaller sizes. But in some cases the vertical lines of characters exactly fit in one pixel, which results in a pure black line in a grey text. Not good.

And Safari? You haven’t seen me talking about Safari. That’s because the font rendering in OSX is all you could wish for. That doesn’t mean I have seen some rendering issues, but they are of a complete other order and are insignificant compared with the troublesome rendering on Windows. Font rendering in the PC version of Safari is by the way just as bad as IE, if not worse.

I recently tried Typekit and seen webfonts on Ascenderfonts. The selected fonts look most of the time way better than you can do yourself. So I guess that webfont services is logical option, from both legally and legibility standpoint.

Related posts:

1. Webfont pitfalls
2. My favorite for converting fonts to EOT
3. Web font rendering in IE9

A few new and cool CSS3 styles become realistic options if you are designing website. That is: as long as you combine them with IE’s counterpart filter.

The list of things that Safari, Chrome and Firefox support is getting larger and larger. Not all functionality is that interesting since we still have to make sure that IE users receive a functional site. And if you’re building something for a customer, you have to make sure that the website looks like what the customer expects it to look like. Most of the time that means that the website must be more or less an exact copy of the designs in Photoshop.

But what is easily forgotten is that for years Internet Explorer sort of supports some CSS styles through the proprietary filter property. I mostly use filter for setting opacity or forcing alpha channels in a PNG24, but when I saw a text shadow in a website I realized that IE can do that trick already for years. So I came up with this list of things that should work on almost any browser:

• Text shadow
• Box shadow
• Blur
• Gradient background
• Opacity
• PNG24 alpha

A little on browser support

A little warning about the “works in”-lines you’ll seewith each example. I didn’t dig very deep to see which version of Opera started to support text-shadow. If see in a support chart that Opera 9.62 supports text-shadow, I haven’t dug deeper to if it was also supported in Opera 9.61. Especially when I relate it to the small share of people who use that browser. If you can point a source that speaks of an earlier version, I’m more than happy to correct the article.

Things you can do with CSS and filters combined

Text shadow

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
Used sparingly can create a nice subtle effect and is a great way to make something a bit more stylish. Watch out with loss of anti-alias. More on that issue at the end of the article.

Text-shadow in IE8

Text-shadow in Firefox 3.5.5

.textShadow {
	width: 250px;
	text-shadow: 1px 1px 1px #cccccc; /* CSS3-compatible browsers */
	filter: dropshadow(color=#cccccc, offx=1, offy=1) /* IE */
}

Blur

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
This one is a bit of hack: CSS3’s text-shadow is misused to create a blur. It was a trick I saw on www.css-tricks.com (hence the name, I guess). And although you can see the differences between the two screenshots, both are definitely blurs. A conditional comment was used to make the text in IE a bit darker so it would match with other browsers.

Blur in IE8

Blur in Firefox 3.5.5

.blur {
	width: 250px;
	color: #ddd;
	text-shadow: 0 0 2px #aaaaaa;
	text-shadow: 0 0 4px #aaaaaa;
	text-shadow: 0 0 6px #aaaaaa;
	filter:
		progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
		progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

<!--[if IE]>
	<style type="text/css">
		/* This style is for IE browsers only by
		   using IE's Conditional Comments */
		.blur {
			color: #aaaaaa;
		}
	</style>
<![endif]-->

Opacity

Works in IE 5.5+ and in all major browsers for years and is safe to use
Definitely the most used combination of CSS and IE’s filter. I mostly use it to make the website almost invisible in favor of an absolute placed div which floats like popup window on top of the greyed out website.

Opacity 0.5 in IE8

Opacity 0.5 in Firefox 3.5.5

.opacity {
	width: 250px;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8+*/
	filter: alpha(opacity=50); /* IE7 and lower */
}

Gradient

Works in IE 5.5+, Firefox 3.6+, Safari4, Chrome 3+
The soon to be released Firefox 3.6 supports gradient background. Safari and Chrome already supports that cool CSS3 feature. Although you can do more with CSS3’s background gradient than IE’s filter, there’s nothing to stop you from using a simple gradient. Well, poor browser support may stop you. Firefox 3.6 still has to be released and Opera does not seem to support gradients at all.

So the browser support for gradients is less than desirable. But since all major browsers except Opera now supports gradients in their latest versions, it will become a useful styling tool soon.

Background gradient in IE8

Background gradient in Chrome 3.0

.gradient {
	background: -moz-linear-gradient(top, bottom,from(#cccccc),to(#888888));
	background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#888888)) no-repeat;
	background; -o-gradient(top, bottom,from(#cccccc),to(#888888));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888); /* IE7 and lower */
}

Box shadow

Works in IE 5.5+, Firefox 3.6+, Safari 3, Chrome 1
If you look at the screenshots below you see a striking difference in what is called a “Shadow“. IE’s box shadow looks more like the right and bottom side of a 3D object than a real life shadow. CSS3’s box-shadow provides a shadow that’s much more realistic.

.boxShadow {
	-moz-box-shadow: 5px 5px 5px #888;
	-webkit-box-shadow: 5px 5px 5px #888;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5); /* IE7 and lower */
	background: #cccccc;
}

Use alpha channel in PNG24 images

Not really a CSS feature, neither something that lacks in modern IE browsers. But it is dearly missed in IE6. The only way to use alpha channels in IE6 (although many have found different ways apply it) is by using the filter’s AlphaImageLoader. Although this filter can save the day, it has many bugs you need to be aware of:

• It can only be used as a background image.
• You cannot position it like a normal background image, nor can the image repeat itself on the x or y axis.
• Links or form elements inside a box with a transparent PNG24 are not clickable. You have to make sure that such elements have a parent that has position: relative.
• Having lots of relative positioned elements scattered around can add extra complexity to your website if it has absolute positioned items floating on top of each other as well.
• You’ll lose text anti-alias.

This technique is only needed in IE6. Other modern browsers use the alpha channel as it ought to be.

.imageAlpha {
	display: block;
	width: 250px;
	height: 40px;
	padding: 5px 10px;
	background: #aaf url(alpha.png) 0 0 repeat-x; /* PNG24 image with alpha layer that works in all modern browsers */
}
* html .imageAlpha { /* these styles are only picked up by IE6 */
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png', sizingMethod='scale')
}

Filter bugs

Filter can clear Cleartype

The main drawback of using IE’s filter is that in some cases the element that has a filter style in IE, will lose it’s anti-aliasing. That may not sound like a big deal, because we have lived for a long time without Microsoft’s Cleartype, but it can get real ugly with larger fonts as you can see in the screenshots below. If you use a filter and it does remove the Cleartype, it’s best to keep the font-size 16 pixels or lower.

Filters can only be applied to boxes

Filters can only be applied to block elements like div or p and they need a width or height. If not, the filter won’t work. The exception to the rule is IE8, which can show filter effects without a width or height.

View demo

No related posts.