Best header fonts

When designing a site what font are you most likely to use for headers?

[SilverLining]

Helvetica and Georgia seem to be popular fonts used by designers for headers. Often it is not practical/possible to build a site to look exactly like a PSD, specifically the text rendering (e.g. "Crisp/Smooth" Anti-Alias).

Lately I tend to prefer using Open Web Fonts above CSS3 @font-face when implementing non-standard fonts. My only concern here is loading time, as there seems to be a lag whilst waiting for the fonts to load, even from CDN sites.

What fonts do you use most for H1/H2s and why? If you could brief a designer on which font to use for headings, which would it be, considering that performance and legibility are important.

Thanks

[lucy24]

<speaking to deaf ears>
Font-families. Users already have preferred fonts for serif, sans-serif, and the rest. They're either set the prefs themselves, or are used to seeing them because it's the browser default.
</deaf ears>

For one site I used :: ahem :: cough-cough :: Papyrus. I later learned that everybody and their dog currently uses Papyrus-- but, heck, I liked it. Headings only, not body text.

One one page I used Comic Sans, but that was an intentional in-joke. For the same reason, my /games/ directory uses an obscure third-party font. People who knew the games will recognize it.

And then there's the group of pages using Courier because it fits in with the theme of the directory.

Font files tend to be VERY LARGE. If you must use embedded fonts, make a copy of the file that's edited down to alphanumerics and basic punctuation-- the characters that will actually occur in a heading. Even after editing, my game font is 49K (I just looked it up), bigger than the html of any page that uses it. Papyrus is over 200, so I used images.

[drhowarddrfine]

You don't brief a designer on legibility or design. The designer briefs you.

Which fonts should be used and why? That's like asking what colors should be used and why.

[Leosghost]

Think of it this way..

You don't get a dog..and then tell it how to bark..

[lucy24]

That's like asking what colors should be used and why.

<lecture>
"What colors to use" can be a perfectly legitimate question, especially if your target audience includes people other than your immediate peers. 19-year-old gamers have one set of preferences and expectations. Middle-aged philosophy professors have a different set. If you use the wrong colors, some readers will take one look and leave. Make sure they're not people who might have been interested in your content.
</lecture>

Granted, you don't get a lot of people taking one look and leaving your site because they don't like the fonts. Unless it's something really outrageous.

:: insert obligatory reference to eleven-point pale-grey Courier* body text ::


* I hunted down the site and checked. It isn't Courier; it's some other monospaced font. But it really was appalling.

[drhowarddrfine]

Of course it's a legitimate question and that's my point. Asking what font to use for h1 and h2 is like asking what color should I use for my background without giving any further information.

Please don't attempt to teach the teacher.

[SilverLining]

Thanks for your comments.

The reason for my question was that a designer asked me what the best font would be to use for headings.

I also saw an article on typographic design patterns [smashingmagazine.com] and thought "I wonder what WebmasterWorld users use for headings?".

[Marshall]

An old rule of thumb is simply that sans-serif fonts are easier to read on screen while serif fonts are easier in print. As far as specifics, e.g. Arial vs Verdana vs Helvetica vs etc., depends what the user's machine has installed.

As for embedded fonts, think of users who might have to download all that onto a mobile device - NOT a user friendly site insofar as bandwidth is concerned. And if it is a way non-standard font, you may want to use an image to keep it consistent.

Marshall

[Kendo]

Most fonts are supported. But have you seen what the "enlarged font" option in web browsers does for your layout?

You don't brief a designer on legibility or design.

That's right. You cannot tell them anything. The designer who actually knows anything about font design and proper layout is few and far between... almost non-existent.

[drhowarddrfine]

An old rule of thumb is ...

Fortunately that's an old rule good designers no longer follow.

The designer who actually knows anything about font design and proper layout is few and far between... almost non-existent.

We aren't talking about font design. We're talking about font usage. On my planet, every designer we use understands and uses fonts and layout far better than I could ever hope to.

[Kendo]

We're talking about font usage.

I see far too many logos designed by persons with no training in typography. How can a corporate logo, managed by an agency that bills the client more than a million per year, look so amateurish?

QANTAS is a typical example.

[drhowarddrfine]

@Kendo - You are assuming these people had no training in typography, that the designer had the final say in the choice of typography, that history behind it had no play and that your personal preference is better than others.

[Kendo]

No. I am saying that when craftsmanship is missing it is most obvious. It's not personal preference at all. Punching keys to set type does not make proper typography. The Qantas logo was not well crafted and anyone with a smidgin of typography training should know that curved letters like O, Q and S should never ever be the same height as N and M.

That's only one example. Most headlines and brand logos that I see today are not properly spaced. Again it's nothing to do with preferences as there is a right way and a wrong way to do things. The wrong way can turn any word into pidgin English.

The bottom line is that by using a computer to set type can make it legible, but its use may not make one a good graphic designer.

[Samizdata]

Asking what font to use for h1 and h2 is like asking what color should I use for my background without giving any further information.

Indeed. In the absence of that information, here are a few considerations:

- Is a lightweight mobile compatible page a priority?
- Would using images be preferable to a font download?
- What kind of business is being represented?
- Does it use a particular font that evokes the brand?
- What kind of impact is being sought?

My general preference is to specify only super-compatible font families for both text and headings, as I like to keep my own pages as lightweight as possible.

But when choosing fonts for a client, the nature of the business is a major consideration - fonts can be highly evocative, there are thousands of them, and what works for a florist may not be suitable for an undertaker.

The "best" font is the one most suitable for the job in hand.

...

[Leosghost]

No. I am saying that when craftsmanship is missing it is most obvious. It's not personal preference at all. Punching keys to set type does not make proper typography. The Qantas logo was not well crafted and anyone with a smidgin of typography training should know that curved letters like O, Q and S should never ever be the same height as N and M.

That's only one example. Most headlines and brand logos that I see today are not properly spaced. Again it's nothing to do with preferences as there is a right way and a wrong way to do things. The wrong way can turn any word into pidgin English.

The bottom line is that by using a computer to set type can make it legible, but its use may not make one a good graphic designer.

[xkcd.com...]
Enjoy :)

The curved Qantas logo text is good..( and resonates visually well with the kangaroo motif's curves..the letters Q and S do not extend either above or below the others, their leading curves render this unnecessary ), however, the "slabby san serif" ( it looks grotesque ) with truncated "A"s, is awful, despite the fact that the Q and the S are actually slightly larger than the other letters..

disclosure..I do actually have a number of years of training in typography and design ( pre dating the existence of PCs ) ..and many years of logo design and signwriting etc, with "quills/pencils" ..and I'm aware of at least 3 other members here who have similar backgrounds which include typography..including at least one other signwriter..( a real "quills/pencils" one :) ..not merely someone with a computer and a vinyl cutter and a vector program with a box of fonts..

Most "logo designers" should be more accurately referred to as "letterhead and webpage masthead designers", because what they "design", may well look reasonable on a letterhead or a webpage, but will look crap ( and be unreadable ) on a moving vehicle, and wont "scale up" to look good and "work" on a building or if the viewer is themselves moving..and some are just "dire" ..the UK 2012 Olympics logo being a perfect example of both "unreadable" and "dire" ..But it cost a reasonably large fortune..and a lot of whalesong and joss sticks went into it..so a committee signed off on it..( or at least Seb Coe did..) writing the check on public money..

[martinibuster]

An old rule of thumb is simply that sans-serif fonts are easier to read on screen while serif fonts are easier in print.

I agree, and will go further. It's more than just a rule, it's a fact. This has less to do with style than it does with the practical and utilitarian concern of making content easy to read.

Serifs are little lines that come off the ending of letters. The effect is to create an easy reading experience as one letter leads to another, led forward by the serif. This works well in print where the resolution of a newspaper is more or less 200 DPI. A computer monitor renders text at a lowly 72 to 100-ish DPI, which is not enough to prevent eye strain when reading Serif fonts.

However with the increasing use of smartphones with high resolution displays around 300 dpi, the use of serif fonts may become a better choice. Perhaps best to split the difference and sniff for the best font?

Verdana is the workhorse font for online legibility. It is wide spaced between letters and easy to read for long periods of time. Arial is another sans-serif font that works well online but the spacing between letters is tighter, which can introduce reader fatigue. The advantage is that you can cram more words into a limited space and still be legible. A font like Verdana is useful for when you want to encourage a longer time on page.

Perhaps a Serif font online is like those uncomfortable fast food seats that encourage people to finish up fast. In the case of a website, who knows, they might encourage people to click on the ads...

[edited by: martinibuster at 3:11 am (utc) on May 25, 2013]

[Leosghost]

Origin of serif fonts..
[en.wikipedia.org...]

I would take issue with the idea in the wikipedia article that they grew from engravers "following brush strokes" ..it is perfectly possible ( and used to be part of the "exercises" for apprentice signwriters ) to use brushes to paint "sans serif" font letters..But as someone who also has done a lot of engraving ( letters and artwork ) in various materials including stone(s) using hand tools..it is very much easier to achieve "neat" edges and ends, if one uses serifs..

There is also an ( IMO ) credible theory that serifs evolved from the Egyptian hieroglyphic figures ..and that the lines are an "abstraction" of the feet of the ever present figures seen in profile..and usually carved into stone..and thus the "neatness" problem would present itself again..and serifs would be a solution..

[lucy24]

Brush strokes? Oh, puh-leeze. Isn't the difference between "drawn" and "lettered" characters explained around page two of any typography textbook or calligraphy manual?

Got a vague idea w### is also responsible for the canard that catchwords originated as an aid to "illiterate bookbinders". I finally gave up on arguing with this one because, hey, who cares about facts when you've got a good story?

Can't say I am wildly impressed by the hieroglyphics idea though. How did serifs springboard over the millennium or two between classical Egyptian hieroglyphics and Roman inscriptional letterforms, skipping over all intervening graphic traditions?

Besides, serifs delimit all ends of a stroke, not only the bottom.

There was a spell in the '50's or '60's, give or take, when Germany had some kind of overreaction to fraktur and tried to put everything in sans-serif. Mercifully it didn't take hold.

When your printer is twelve dpi, sans-serif is definitely a safer option :)

[Samizdata]

Brush strokes? Oh, puh-leeze. Isn't the difference between "drawn" and "lettered" characters explained around page two of any typography textbook or calligraphy manual?

Presumably page one (which may have been missing) would have explained that western typography is founded upon classical Roman inscriptions, generally recognised to have been drawn with... um... brush strokes.

Brush strokes are cool (as are those made with nibs and chisels).

...

[lucy24]

Where I come from, "inscribe" means carve in stone. Unless your brush has been sitting in dried paint for a very, very long time, you are not going to be able to do much inscribing (scratching, engraving, etc) with it. Written text-- whether by brush, stylus, reed/quill* or some other mechanism-- is something entirely different.

Besides, the earliest printed books used letterforms that replicated those produced by handwriting using a nibbed instrument. (This description applies to both italic and blackletter/fraktur.) "Roman" fonts came along many decades later.


* i.e. anything hollow.

[drhowarddrfine]

I agree, and will go further. It's more than just a rule, it's a fact. This has less to do with style than it does with the practical and utilitarian concern of making content easy to read.

And it's no longer true as I said earlier.

There was a whole collection of articles I read a couple years ago by Andy Rutledge, iA and other designers, and especially a list of other real type and font designers who finally turned the tide at my company and made us believe what we were afraid to say out loud. That you use serif or sans-serif that is legible in the font and size you want to use. You NEVER use sans-serif, or avoid serif, just because it's on the screen or the web.

I wish I kept the collection of links, having only deleted them a few weeks ago, but I'm not sure I could list them here anyway.

[Samizdata]

Where I come from, "inscribe" means carve in stone

Perhaps you imagine Fredius Flintstionius with a hammer and chisel doing freehand lettering.

In reality Roman inscriptions were first lettered with a paintbrush so Fredius could do his stuff - while it is certainly possible that a master craftsmen would do every aspect of the job, it seems more likely that Barnii Rubellus would have done the signwriting.

Written text-- whether by brush, stylus, reed/quill or some other mechanism-- is something entirely different.

Classical Roman capitals (sometimes referred to as Trajan) are formed with a brush in a similar way to calligraphy using simple strokes (as few as possible).

Barnii did not draw the letters in outline for Fredius to carve.

Besides, the earliest printed books used letterforms that replicated those produced by handwriting using a nibbed instrument. (This description applies to both italic and blackletter/fraktur.) "Roman" fonts came along many decades later.

Western typography is not based on the gothic Gutenberg Bible of 1455.

It is based on the Roman revival in Venice less than twenty years later.

The upper case letters were taken from classical Roman inscriptions (brush based).

The lower case letters were derived from Carolingian minuscules (pen based) in the mistaken belief that they also came from the classical era.

Pen and brush lettering are essentially the same thing, with brushes used for larger work.

Yabba dabba doo.

...

[lucy24]

Nope. Sorry. Not this time.

Tune in next week for a disquisition of how the design of the Sistine Chapel was determined by sixteenth-century pencil techniques, since major paintings were always preceded by cartoons.

[Samizdata]

Nope. Sorry. Not this time

Not sure what you are disagreeing with.

[youtube.com...]

Wilma!

...