I’m thinking of giving my website a bit of a polish and was wondering about fonts. What is the received wisdom of using times on webpages - is it a good or a bad thing?
I’ve heard that some fonts have been developed specifically for the internet age because they look good on screen - what are they?
I guess answers to this question will be subjective - I’ve put it in GQ for the noo just to get the basic rights and wrongs of font choice as a starter.
Are we talking about HTML sites, or Flash? - with the latter, you can embed fonts - with the former, the browser may substitute them for something else - usually something broadly similar, but that depends on how outlandish or uncommon a font you specified. Not all of your visitors will be Windows users, so even the default list of fonts available to you in Windows is likely to include some that are not present on some of your potential visitors’ machines.
Thanks mangetout - we’re talking about a back of an envelope html site that I edit in notepad.
We do editorial and graphic design work (mainly for non-profits) in both print and the Internet. I relayed the OP to Mrs. Dvl (she does the graphic work), and to inelegantly summarize:
The main drawback of using Times is that it’s the default typeface in almost every application that helps novices put up Web pages. This means it may not give you the “polish” you’re looking for, in that discerning users will easily see it as a templated or basic site. It should, however, work across a range of platforms.
As for browser-based readability, Arial, Geneva, Trebuchet, Century Gothic, and, of course, Times are standard fonts that most computers (Mac n PC) should have built in.
Again, there’s nothing wrong with Times per se, but if you’re looking for polish, you probably want to avoid setting your entire site in the same font. A careful combination of two or three fonts in varying sizes, weights, and colors will do wonders for the overall look and feel.
To avoid a jumbled mess that could get you nominated for a Weird Earl, maintain a strong consistency throughout your site — for example, keep all links in one typeface, headers in another, and text in a third. By maintaining this, visitors moving from page to page will quickly see where the meat of the site it, where to find links, etc. Of course, preview is your friend, so some combinations will work better than others (both in number of typefaces and their relative placement).
Hope this helps!
Rhythm
The advice Rhythm offered is an ingot of pure gold.
Some of text design and page layout has to do with your audience. What’s good for older readers won’t necessarily attract young whippersnappers, but nobody want a headache.
For the websites I’ve created, I list fonts like DreamWeaver—the professional web construction program—does:
verdana, arial, helvetical, sans-serif.
This should cover 99.9 of the computers out there. Use no faces that are overly bold, and nothing too thin; and, (as if your life depended on it), avoid using anything that might be described “swoopy.”
I used three sizes of type:
heads, 30 or 36 pt, maybe in dark red or soft blue.
subheads or kickers 18pt. Maybe in black bold.
text, 12 pts.
Whatever you do, be consistent! Make templates for speedy construction.
People don’t like to read online—except here of course, but then we’re a peculiar bunch. Make the page easy to scan and then keep the copy as short as possible and still get your point(s) across. Go easy on bold or italics. Use bullets. Separate paragraphs with a blank line.
When I was first learning web design, I was told that I had 3 seconds to hook my visitors, and that any page on the website should be accessible in 3 clicks. This 3 clicks rule has been softened over the years, but it’s still has merit.
Find a website you like and check VIEW > SOURCE and see what they’ve done.
G’luck.
Thanks for the advice **rhythmdvl **and myself. I shouldn’t have used the word polished really, more of an update. My site is just a few pages and needs to be clean, clear and simple to navigate. Density of information is not too much of a problem due to the target audience, so I’ll check for consistency and try out some of the fonts you suggest.
Definitely don’t use Times, it looks dated. My favorites for text are by far Verdana and sometimes Arial (sans-serif), and Georgia (if you want a serif font). For headings, I like Georgia or Trebuchet MS if you want sans.
Here are two really useful tools for testing out different fonts:
What I do is, whenever I am looking at a web site which I really like their fonts, I use a Firefox extension called CSSViewer, and you can just hover over any element and it will tell you its properties, including what font, font-size, letter-spacing, line-height, and color anything is. Then I just copy the look!
I personally like the look of Georgia and am using that on one site (note - I am not a professional web designer so take everything I say with a grain of salt.) When I was researching fonts I remember reading this study:
http://psychology.wichita.edu/optimalweb/text.htm
Some of their conclusions: for common fonts, 10, 12 and 14 point sizes are all OK.
Times New Roman and Arial were the ones that you could read the most quickly.
Arial and Couriere were the most legible.
Most people did not like the Times font.
etc.
Just to make a point here, the big mistake that amateurs ('scuse the slur) make is to mix too many fonts, font weights and sizes resulting in a jumbled mess. As you’re unfamiliar with typographic design, stick to one font, or if you use 2, use one for main headings, and another, simpler font (e.g. arial) for everything else. Don’t go mad with different font weights and sizes - to distinguish between a subheading and body text, for instance, use colour OR font weight OR font size, but not a mix of the 3.
The majority of the world’s top companies will use Arial for the main body font on their sites, for its ease of use and legibility (and because it generally looks so bland that it doesn’t clash with their brand).
Hear Hear
San Vito*
*Creative Director of London Design Agency with 1st class honours degree in Typography
This is one of the reasons I still love the web design tool I use. (most of my own site is done using it)
It’s called namu6 - It’s very much targeted at amateurs, but the key strength is that you define the style of headings, text blocks, backgrounds, borders and link colours, then you cannot deviate from it, even if you want to. Want to use a different font? You can’t. Want to make some text purple. You can’t. Want a rotating, flaming animated logo? You can’t.
I sometimes find it a bit too restrictive in some ways, and have to work around it by manually editing the code it spits out - but for complete amateurs (like me) without a formal background in design, it can provide a useful framework of restraint against the most horrible web design sins.
Verdana was designed specifically to be readable on computer monitors.
It’s by far (IMO) the best choice for web design, with Arial second.
I have been working with type for 40 years, and I never, ever use Times for anything. AFAIK, Times is the only typeface that was literally designed by a committee; it has no distinguishing characteristics whatsoever. I once had a job that included, as part of my job description, the ability to identify typefaces. I’d get a sample of some type from a client, and I had to identify it. I learned to look for certain telltale characters that make a face unique, like the cap “R” or the lowercase “g” or the ampersand. Chances are, when I was looking at a serif face with no distinguishing characteristics whatsoever, it was Times.
And I don’t use Helvetica either, for the same reason.
I have my browser set to override fonts and display everything in Verdana. Though on paper I can read Times just fine, I find on a monitor, I can’t read it as well and trying to gives me a headache.
Back when I did websites professionally, I rarely used serif fonts for body text. The only time I did was when the client insisted on it, and I invariably chose Georgia over Times NR for better readability. Georgia’s letters are a bit wider and taller. However for large, bold headers (short phrases or words), serif fonts would probably be okay.
Trebuchet is also a relatively readable sans-serif font that has a little more character, IMHO, than Verdana.
Once you choose a font (sans serif) the best way to gain clarity is line spacing and paragraphing. Look at modern sleek blogs, and you’ll see there’s a lot more whitespace being used than there used to be, and it adds elegance and simplicity to even a large amount of text.
[ul]
[li]Keep paragraphs small and well spaced out.[/li][li]Keep the text colour well contrasted and colour-coordinated.[/li][li]Use headlines or spacer graphics to separate entries.[/li][/ul]
The guiding rules I have read are:
Use a sans-serif proportional font like Arial for isolated text like labels and titles. It’s cleaner.
Use a serif proportional font like Times New Roman for text that occupies multiple lines. The serifs form the appearance of lines that help the eye follow.
Use a nonproportional font like Courier New for tabular information and computer code so that columns and line-to-line similarity is visible.
If you are relying on Windows PCs to have installed fonts, the above three, and Symbol, are pretty much all you can take for granted.
I suggest you use style sheets so you can change fonts easily and see the effect. Divide your HTML into division and then use CSS to assign a font to a <div>.
Can someone tell me where in the style sheet the body text is defined? I’m not really sure what I’m doing with it. Here it is:
a:link {color: #000080;
text-decoration: none;
font-weight: bold;
font-size: 10pt;
font-family: times, sans-serif}
a:active {colour: #000080;
text-decoration: none;
font-weight: bold;
font-size: 10pt;
font-family: times, sans-serif}
a:visited {color: #000080;
text-decoration: none;
font-weight: bold;
font-size: 10pt;
font-family: times, sans-serif}
a:hover {text-decoration: underline;
color: #000080}
h1 {color: #000080;
font-weight: normal;
font-family: arial;
font-size: 30pt}
h2 {color: #000080;
font-weight: normal;
font-family: arial;
font-size: 18pt;}
.footer {color: 000080;
font-family: verdana, sans-serif;
font-size: 8pt}
.footer a:visited {
color: 000080;
text-decoration: none;
font-family: verdana, sans-serif;
font-size: 8pt}
.footer a:link {
color: 000080;
text-decoration: none;
font-family: verdana, sans-serif;
font-size: 8pt}
.footer a:hover {
color: 000080;
text-decoration: underline;
font-family: verdana, sans-serif;
font-size: 8pt}
img {border: none}
table {text-align: justify}
Which of those variables describes the body text, or is it undefined 
Looks to me like you don’t have a body tag defining fonts, etc. However, if you do define the font in the body tag, I don’t think it applies to text within tables, so if you’re using tables to lay out your site, you’ll need to define the font in the table tag.
It’s been awhile since I’ve done this so I could be wrong, or it could have changed since I’ve worked on websites. But give that a try.
ETA: I just remembered you can use a paragraph descriptor as well. I think it’s just ‘p’
I don’t know what you all are talking about. Verdana? Trebuchet? Feh.
Comic Sans all the way, baby!