Learning Webtypography

I have been in the business of web design and website development for a long time. One of the areas that I’m not fully confident about is typography. I would say I know about 30% of it.

Though typography has been important since the advent of the Internet but I’m sure most of you would agree that increasingly typography is an important element of how the website is perceived by the website visitors (maybe since I have started appreciating the nuances of typography elements in a website design I’m the one who feels it has become more important)

Till now I have played safe using some typical fonts like Arial, Verdana and Tahoma:). I want to study about Typography in webdesign.

Please recommend resources, online and offline, that I should use.

Thank you in advance.

Pali Madra

Well you have a lot of choices I prefer Google Web Fonts and Font Face but there are some other resources that you can use. One of the important things is how you use your typography. Here is nice tutorial for that: http://www.pearsonified.com/2011/12/golden-ratio-typography.php

The thing about typography in web design is that first, web fonts waste bandwidth for little tangeable benefits… and second, the only thing you can be 100% certain of is that there is NO guarantee the font you declare is what the user is going to see. Differing renderers, fonts not being available, different default system metrics – they all add up to a level of unpredictability that means worrying about the “face” is a effort in futility.

Same goes for declaration of sizes, get a load of this:

Those are all declared at the same ‘size’ – notice how wildly they vary? Something to keep in mind when using those fall-back families is that even at the same declared size, it’s VERY unlikely that two fonts will return even close to the same size.

It’s also where legibility ‘tricks’ come into play – a LOT of people say verdana is the most legible sans-serif font – compared to say, arial,helvetica or corbel… but is that because it’s glyphs and kerning are clearer, or because it renders 25% larger at the same font-size? Not exactly a fair comparison.

Though I just used a few terms you might not know, and I’m probably going to use a few you’ve never heard… the simple ones, glyph (the character itself) and kerning (space AND overlap between characters) are easy to explain, but if you REALLY want to learn about typography, there’s a whole slew you should learn… thankfully there’s a REALLY good reference pic on paratype.com

In the print world, it’s generally agreed that serifs improve legibility – in the screen world the opposite is typically the case… why is that? Simple, DPI.

In print, 300dpi is the lowest you’ll typically find when printing at home – professional printing STARTS at 1200dpi and goes up from there. In terms of physical pixels per inch, a high DPI desktop screen today runs around 90dpi (24" 1920x1080, 21" 1680x900) – far, FAR below what’s considered useless rubbish in the print world. While certainly handhelds and notebooks push this further, they are also meant to be viewed from a significantly reduced distance, skewing it to approximately the same number of dots per degree of field of view… so still less than a twelfth the number of dots of professional print.

This reduction in dots to draw characters with means that serifs get chopped off, greyscale summed incorrectly, blur together with the hairlines and bars, and on the whole make the font less legible the smaller you go in size… as such keeping a minimum size in mind for each type of font is very important for legibility… and that’s one of the things about typography you DON’T see discussed enough: SIZE. You’ll see people going on and on about how glyphs render and how different engines handle the glyphs and aliasing and so forth – but you rarely see good discussions about size – and size matters.

There was an article a while back doing research on fonts in e-mails.

His numbers are in points, not pixels, but we can translate that fairly easily… Dr. Wilson’s research showed that as a rule of thumb, Times New Roman needed to be 15-20% larger than the same text in Arial, that verdana came up ‘too large’ at 12pt at five times the rate Arial did at the same size, 10pt arial got 20% complaints of too small, while 9pt arial got an 85% response of ‘too small’.

He comes to the conclusion of using 12pt arial, but really that returned 14% too large, so the ‘ideal’ is probably more like 11%… but that’s all in points…

A normal computer pretending the display is 96dpi (which is nowhere near reality) that comes out to 12pt being 16px… hey, isn’t that the HTML default size? 9pt, the ‘uselessly small’ in one of the cleanest fonts there is – arial – comes in at 12px…

My rule of thumb from using his research and my own observation, is that 12px for sans-serif fonts should be considered the absolute smallest size you’d EVER consider using, and even then unless it’s all-caps it’s still useless to a LOT of users. I get squirrelly if my default font size ends up below 14px for 96dpi users… but again, whenever possible we should be using %/em.

Which is why my default font declaration for BODY (and therein 99% of the non-heading content on a page) ends up:

font:normal 85%/150% arial,helvetica,sans-serif;

85% of the default 16px ends up rounding to 14px on small font/120dpi systems, and comes to an exact 17px for large font/120dpi machines. In other words, 10pt. A ‘perfect’ 10pt would actually be 82.5%, but that extra bit lets large fonts round up to 17px – and typically LF/120 users appreciate that extra pixel. In my experience, that’s the ideal. Serif fonts needing to be 15-20% larger due to their more complex glyphs, and that’s easy; 100%. Of course that’s the default in browsers, so maybe, just MAYBE they had some clue what they were doing over 18 years ago when that default on desktop browsers came to be?

Also, a word on line-heights. For years in print it’s been known that taller line-heights make long lines of text more legible. It’s just easier to read when it’s not a continuous blur. Many people go ape with restricting the width to deal with this, and then either fail to re-declare line-heights (resulting in text lines overlapping each-other for large font/120dpi users) or use ones that are too small. While the HTML spec recommendation for a default is “110 to 130%”, I suggest going to 150% or MORE… Though I’m finding as I grow older I keep upping that higher! :smiley:

It’s also why every time I see someone declare font-size:10px or smaller my arm swings up into pimp-slap position.

CSS also lets you control letter-spacing, basically increase or decreasing of the kerning. This can transform even plane jane times or arial into something different; but take care with it. Since freetype on Linux already gets down on it’s knees in front of the proverbial equine when it comes to kerning text, a simple letter-spacing:1px on a 16px “times” might look great in Windows and OSX, but will look illegibly stupid in Linux… so you HAVE to test multiple font rendering platforms before you write off on the use of letter-spacing.

Though that’s good practice all around; TEST what happens when your webfont isn’t available/working/blocked, TEST what your fallback families actually look like on other platforms, TEST what re-re #DDD font kerning on engines like freetype does to your page.

It’s also common for the more graphically oriented to try and use fancy script-type fonts. Script on screen is WORSE than serifs in that regard – small sizes being illegible even to people with 20/20 due to the complexity, and many fancy scripts being illegible to most everybody!

To regale you with a relevant tale: About… wow, over twenty years ago, I was dating this girl still in college (yeah, yeah, cradle robber) who was in their little comedy performance group – and she was a marketing/design major and used her newly formed graphic arts skills to design a logo for them in a very ornate script to go on mugs, t-shirts, advertising, etc… She showed it to me all excited, and like the **** I am, naturally I went:

What on earth is a “Gomudsey Grueue?!?”… She’s like “No, it says Comedy Crew”… Sure it does… impromptu test of five passers-by got two “what does that even say” and three more “what’s a Gomudsey Grueue?”.

Fancy scripts of that nature, particularly those with loops, hoops and serifs that overlap are often less legible than your average captcha – combine that with the relatively low dot-pitch of a computer display, and you get something that – excuse me while I flog the long deceased and starting to rot horse carcass – is useless, REGARDLESS of how pretty it is.

… and no matter what you do for face, size or kerning, getting people to weigh in on legibility is the real litmus test… and why it might look ‘plain’ or ‘boring’ to everyones inner art f… art f… art fan, sticking with a known reliable formula means you are more likely to be able to deliver your CONTENT to the user in a USABLE manner; something that should ALWAYS be your main priority… since again, people visit websites for the CONTENT, not the goofy graphics you hang around the content. Fancy fonts in illegible sizes get in the way of that – no matter how pretty they are.

Which is probably why your ‘playing it safe’ with Arial,Verdana,Tahoma means you already know more about web typography than most people who bloat out their pages with 300 megs of illegible webfonts.