18

I'm working on some of the layouts for a User Handbook and right now my main concern is fonts. I'm trying to decide whether to use the same font for the body text and the headings.

If I use different fonts (along with the larger type and bolding), that will draw attention to headers and make it easy to skim. However, using the same font is more consistent and may be smoother to read.

Should I always use the same font for headings for readability purposes? What if I'm starting a new chapter as opposed to a new section?

2
  • 1
    You really mean "typeface" not "font". When someone says "same font", to me this means same typeface, weight and size.
    – Peter
    Commented Feb 18, 2015 at 7:58
  • There are rules for mixing. A cute exercise: design.codeschool.com/levels/1/challenges/2
    – JNF
    Commented Jan 28, 2016 at 12:30

10 Answers 10

18

Headings may use the same font as the body, but they are not required to. Plenty of great typography uses different fonts for the body and headings. In fact, there are fonts specifically designed for each purpose -- "text" faces for the body, and "display" faces for headings, titles, posters, and so on.

If you have a single good font, it is acceptable, perhaps even preferable, to use it for both the text and the headings. When an assortment of quality typefaces are available, picking a different one for headings is common and does not inherently damage typography (although a bad font pairing can be detrimental).

Using the same font family for the body and headings will not necessarily make your document more difficult to skim. Larger sizes (using a scale), bold, italics, and small caps all provide ways to draw the appropriate amount of attention to points of interest without the use of additional font families. Just be careful not to thwack readers in the face with them.

If you want to carefully craft every detail in the design of your document, feel free to pick a different typeface for headings. If you don't want to spend time worrying about nit-picky details, use the same face as the body text, or use an established text/display pairing.

8

Whenever I see the word "Always" in a question like this, I sigh deeply and roll my eyes.

Seriously though, what you want to achieve is that the headings are clearly perceived as headings, but that the reader is not jarred out of the content and into seeing the form "...whoa, look at that font change!". Whatever you do is fine as long as this balance is achieved. Some usability testing with persons unfamiliar with the work may be the best way to confirm that you've succeeded.

0
2

Actually, using the same font for headings will probably make them less readable, as they will be too "light"...

You might want to look at some (technical) books & manuals that you consider well designed and "learn from the masters".

4
  • 1
    I think waiwai933 will still make the headings bold, underlined, etc... it's just the font itself.
    – Dan Barak
    Commented Aug 23, 2010 at 23:50
  • A font is one style in a type family... (and originally it was even restricted to 1 size of 1 style). But even if you take it broader, a normal "bold" (or demibold) as you would use in body text often isn't heavy enough for titles at bigger point sizes.
    – JanC
    Commented Aug 24, 2010 at 4:47
  • Technically Jan is correct about a bold face being a separate font, but I disagree about medium weight being too light for titles. If text is sufficiently large, a medium face may be preferable -- the text already draws your attention by its size, and typically a bold face will enhance neither readability nor visual appeal in that context. That said, you probably do want to use a display face instead of a text face.
    – Steve S
    Commented Aug 24, 2010 at 14:23
  • Well, yeah, it all depends on the design (e.g. white space around titles and colours, if used, influence things too).
    – JanC
    Commented Aug 25, 2010 at 1:57
2

Consider the following:

  • If you want to the handbook to be official and "professional" oriented, I'd stick with the same font.
  • If the mood is a bit lighter, then you can probably go ahead and use different fonts.
  • Also consider whether the handbook might be viewed on the web - in that case, make sure to pick a supported font across all browsers.
  • Some of the text including the heading might be copied and pasted into another place... I'm not sure, but I have a feeling that if you use the same font, you'll get less surprises.
1
  • So you are saying that MS Office is doing wrong by using two different font types each for header and body and not giving a professional looking?
    – Abektes
    Commented Mar 12, 2014 at 9:32
2

As mentioned above, Microsoft recommends Calibri throughout. I tend to disagree a little bit: I prefer a serif font for readability (as LoganGoesPlaces touches upon) for the main block of text. In screen-based material, I find that a good serif font, like Cambria, is still very readable, and is awesome for printing.

I like a little bit of serif/sans-serif back and forth when laying out a document, and will often use Calibri for document headings (or the reverse, sans-serif for headings and serif for body text, if I know it'll never be printed).

1

Depends on the font. Some fonts are designed for smaller sizes (for instance, Verdana) and look pretty darn ugly when rendered above something like 12px. I tend to defer to Arial when I get to the heading level. Similarly, I don't touch Arial below 12px because it's really thin and has really tight kerning, making it hard to distinguish different letters (this effect is reduced by Apple's font rendering).

So generally, for me it boils down to legibility and a smidgen of taste.

1

Fonts are a designers friend and as long as you keep a few things in mind, your user's shouldn't experience any ill effects from the variety.

First, variety is good but keep it to a minimum. Using a different font for headings will definitely attract attention, but using too many will make your design messy and possibly confusing.

Second, as others have mentioned, font size really matters. Serif fonts are great for blocks of printed text because the serifs help the eye flow through the text. Unfortunately this does not hold true for viewing on screen. Smaller sized serif fonts can be difficult to read even on newer screens.

So I say you should definitely use fonts to their full effect. They are a quick and easy way to jazz up a design. If you are concerned about having too big a difference between the headings and body, pick a similar font with a few stylish differences to give the design a little something.

1

Personally, I like to do headlines in large, serif fonts, while body copy is a normal sized sans-serif. I feel the contrast is key for easy skimming, because people don't read on the web. Therefore, you should make your content as easy to browse as possible, and different typefaces is a way to do that.

0

For printed material, I like to use a different font from the same family for the headers. My current preference for writing user guides at work is headers in Cambria 12pt bold, and the body text in Calibri 11pt regular. I think it has a really nice flow, and as I mention in the example image below, it prints quite well on a black & white laser printer.

example image

Microsoft, in their UX (User Experience) Guidelines, recommends using Calibri 9pt regular for document text, and Calibri 17pt regular for document headings. I think that's for screen-displayed material, rather than printed material (the font sizes seem way too far apart for printed material).

0

The main purpose of any heading is to convey the message in a short, succinct way and at times to grab attention. Hence headings need to be more prominent than the body text.

You may achieve this by any means you like:

  • by keeping the font size of the heading and body same and playing with the font weight and style (like italicizing text);
  • or by using different fonts for heading and body

There is no hard-and-fast rule that dictates the use of the same font for heading and body text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.