Before and After Magazine have a great PDF download on choosing the right typeface (via LifeClever).
It’s actually a topic I’ve been asked about twice today so it is a timely find.
I’m no expert on design but my approach to choosing fonts is two fold:
1. Take on board the advice of designers – I’m lucky enough to be able to afford some quality designers to do my work – they usually make sense on issues such as font.
2. Keep it simple – one of my old teachers once gave me some advice that has stuck in my head with regard to font choice. She said that the best fonts are those that people are used to reading. People become familiar with fonts over time and learn to read them. When they’re confronted with one they’ve not see before that is quite different they tend to find it harder to read. While this might mean you end up choosing ‘boring’ or ‘normal’ fonts – it also means your readers don’t have to strain to read your blog.
Having said that – I’m not the guy to ask questions about with regards to fonts. If you’ve got some expertise (or even just a strongly felt opinion) on the topic have your say in comments.
Also interested to know – what font do you use (ProBlogger uses Arial Narrow)?
Since I’ve started webdesign I love Verdana, but actually I am using Arial and Trebuchet MS a lot. But, my blog stills Verdana – http://www.auriumsoft.com.br/blog.
I am not used to Arial Narrow yet, so ProBlogger stills kind of “heavy” to my eyes :)
I’m a big fan of Verdana, as well. I think it is neat, well-spaced, and very easy to read.
Arial Narrow, eh? That’s why the site looks so terrible, and I always read it in my RSS reader instead. :)
Verdana.
According to Wikepedia, “Verdana was designed to be readable at small sizes on a computer screen.”
It was deisigned by Microsoft just for this reason, everyone has it on their computer, and it looks good. I’ve been using it for years in web design.
I agree with Darren that using an uncommon font may look stylish, but from a usability standpoint is a mistake because users find it hard to read. There are too other websites your visitors could visit instead of yours, don’t drive them away because you are trying to be “cool.”
I’ve always wondered what your font is – I think it’s great. It’s familiar enough to read easily but different enough to be…. well different.
Darren, thanks so much for linking to LifeClever. I wanted to clarify that the Before & After PDF is mainly geared towards choosing typefaces for printed matter. For websites, blogs included, here are some additional rules of thumb:
1. Choose a typeface optimized for the screen
Most typefaces made for printed matter look horrible on-screen because of the coarser resolution of computer displays. The result is fuzzy anti-aliasing and bad letterspacing. Fortunately, several typefaces were made to render well on-screen. The most used are Matthew Carter’s Verdana and Georgia. They read well at small sizes, have true italics, and distinctly bold weights. They’re also installed on almost every computer, which probably makes them the best choice for blogs. Windows Vista will come with a new slew of screen-optimized fonts, so if Apple licenses these fonts, you’ll have a much greater library of web typefaces to choose from.
2. Don’t letterspace lowercase letters
One of the cardinal sins of typography is to never ever letterspace lowercase text. The greater distance between lowercase letters makes them harder to read because you deemphasize the horizontal motion of the word. Darren, you are guilty of this! :-P It’s okay to letterspace text set in ALL CAPS. When text is set with all capital letters, the shapes look more similar to each other, so spacing them apart actually helps them look more legible.
3. Don’t make line-spacing too tight
When lines are too close to each other, they are harder to read for the same reason as letterspacing lowercase letters. It deemphasizes the horizontal motion of the line. In general, I like to use a line-spacing of 1.5em to 1.8em, depending on the line length.
Quick fixes for Darren:
Replace the CSS for your “body” tag with this:
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
letter-spacing: 0px;
line-height: 1.5em;
margin: 10 0 0 0;
padding: 0;
}
Or for a more literary feel:
body {
font-family: Georgia, Arial, sans-serif;
font-size: 13px;
line-height: 1.5em;
letter-spacing: 0px;
margin: 10 0 0 0;
padding: 0;
}
Putting body text aside (readability), fonts can be a very good way to get distinction, to be unique. The trouble on the web is you have a very limited choice if you want to guarantee the font is available on your viewer’s systems (drives most designers crazy).
You’ll notice that most books/paperbacks are serif (Exp: Times). A lot of tech-related materials are san-serif (Exp: Helvetica).
Back when I first became a designer, the big argument was that Helvetica wasn’t readable and you very rarely saw it used outside of tech company literature. One technique used in the general media was Helvetica headlines with Times boy. Now, everyone is used to it and it’s accepted..
A couple of articles I found useful when laying out my blog were from Software Usability Research Laboratory, Department of Psychology, Wichita State University.
Optimal Web Design: How should text be presented within a website? and
Usability News Vol 4 Issue 2 2002: The Effects of Line Length on Children and Adults’ Online Reading Performance.
I referred to these in my post on how to Display code in fixed-width blogs without line wrapping.
Folks, don’t use pixels for font heights. Use “ems.”
Dale Cruse, why don’t use pixels?
Actually, I am developing & desining a big project, and I used px for fonts. What is the problem?
I have to say, I’m much happier reading screen text with a serif font than a sans-serif font. I know that’s blasphemy in some circles, but sans-serif fonts give me a headache. They’re difficult to read.
I’m using Arial right now but have been thinking over the past few days that it needs a change. There’s just something about the plain arial font that seems so amateur to me. Maybe it’s because I used it in school papers.
@Alfred Reinold Baudisch – using ems when sizing fonts is better than pixels because of increased accessibility. With em-sized fonts, users can increase or decrease the website’s text size. This is especially important for IE users because if the font size is specified in pixels, they won’t be able to resize the text.
Here’s a good article on how to use ems for size text: http://www.clagnut.com/blog/348/
Considering that fonts should be sans-serif, crossplatform and 3 in a CSS, there’s isn’t much choice.
the other thing to think about in relation to type is colours. with my current theme, i have been using a black background with a very light, almost white text. most people like the look, but i have had some readers comment that they find this colour difficult to read. in the next version of the garage we will be using black of white for the text area, as this seems to be more acceptable for most people.
I normally use Verdana and Tahoma. I think Verdana is one of the best fonts for text in websites, even on paper I prefer Verdana to Arial.
I user Verdana and Arial on most of my sites. I think they are easiest to read. Black on white text is also easiest for me to read. I have some minor vision problems (retinopathy) and some sites that are too hard for me to read, I avoid forever. Usually, it’s sites that use a light font on a dark background that are the most difficult for me to read.
In theory, using em or pt instead of px is best for accesibility, but sometimes it is difficult to make the site look good when you increase the font size in the browser or use larger fonts as your default screen property. In fact, a lot of blogs that use em looked messed up when I switch my display properties to large fonts or an even bigger custom font size.
If you use em or pt instead of px then you should test it a lot.
Verdana for the win =)
the font here is the worst part of the site. sorry darren.
@myMacBUZZ very thanks for your reply and site. I needed some kind of info like this site.
Regards.
I worked in classified ads for 2 1/2 years and for a long time I would have automatically agreed that you should always use a serif typeface, no matter what.
When I was deciding what to use on my blog, I decided that I really did want the clean lines of a sans-serif typeface, so I use Trebuchet MS.
However, it’s 12 points – huge compared to many blogs. I think text on a blog should be large.
You have to get the attention-challenged Sesame Street/MTV generation (of which I am a proud member) to pay attention to you if you want to succeed in blogging, so you need to make things easy for them. And it’s not as if you have to pay more for the space, like a book or newspaper publisher has to.
My rough vision for the visual design of my blog is to make it as easy to read as one of the old style UK Labour-supporting tabloids, such as the Daily Mirror.
My feeling is that sans-serifs are fine in the fast food information environ of blogs & other news sites. There’s not much real risk of fatiguing your readers, as most are only consuming in bite-sized articles and posts anyway.
Would I want to read an entire PDF manual or a printed book in a sans-serif? HELL NO!
That would be asking for eye strain. Sure, we’re all accustomed to reading sans-serifs at this point, but there’s a difference between being accustomed and being fundamentally comfortable. I’m “accustomed” to running short distances, regularly even, but I would be severely uncomfortable doing it for 26.4 miles (marathon distance).
I think the best solution is to embed the font you want into your blog (thus alienating Firefox users). I’d go for something like Myriad.
Why Georgia, why ?
I prefer Tahoma, Verdana and good ol New Times Roman
im usually use Arial text font; size 12px for my blog at balootisme.com
my dating blog is using verdana size 14px; quite big and its easy-reading. my dating blog is reached by baby boomers too.
I tried an assortment of fonts for my blog before settling down to the default blogger font – Times New Roman ?
When you highlight a quotation or make it bold, is it considered shouting ?
I like to change my font from post to post, but I am most drawn to fonts that are sans serif, Arial, Verdana, Trebuchet, Comic…
I’ve heard from many of my web design friends that Verdana has fallen out of favor among most designers. The very reason that makes Verdana appealing to old-school internet folk causes headaches in design departments nowadays — especially with easily resizable, modern browsers. Verdana was designed to be “a little bigger to the eye” at smaller font sizes, which really helped back when browsers didn’t let you resize on the fly; however, modern browsers are not only easily resized (Ctrl+/-), but also allow the user to specify the desired “default” font they want to view web pages (in other words, we can over-ride the font choice and size a particular web site has). Coupled with those factors, most web designers use other fonts that aren’t “artifcially” bigger.