typography simple steps

Simple rules for good typography

Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.
Don’t use too many typefaces
Consistency throughout a document or website is helpful. It brings unity and one identity. It also makes it clean, tidy and just basically not messy. A good rule to follow then is to not use more than 3 different typefaces in one document.

Hierarchy
It is always important in typography to pay close attention to the hierarchy of the page. The most basic thing is to keep the headline at the top of the page in a larger size. But more than this its just a case of looking at the page and asking other people what they read first. As a designer we should be thinking about communication constantly. This is our primary focus.

Font size
Use no more than 4 font sizes in a document or website. Preferably 3. Again this is a case of consistency. Too many copy sizes make a document disjointed. 3 also allows enough variation to emphasise certain text and categorise text together. For example, you have one size for a heading, one for an introduction, one for body text and one for a pullout quote or something else. This will be consistent across the whole
8-10pt for body copy
Always keep body point between between these sizes. It looks neat and tidy and allows headings. Definitely do not go over 12pt.
A typeface not legible is not a typeface
There is a place for all kinds of artistic typefaces, but for good standard copy lets keep things simple people. It must be legible. This is certainly the case for body copy. Keep experimental typefaces for posters or at best headlines. They are never well received in large quantities. Can you read this easily?


Leading
Leading is essentially the vertical space between the lines of type. Leading is something that so many designers forget about, its easy just to stick with the auto settings. But trust me, this can make or break a document. Pay close attention to your leading. I personally like to keep my leading tight, but without ever overlapping. Usually I will go for a little above the font size, slightly below the auto setting. This works especially well with helvetica like typefaces. Either way, there should not be too much space, and the letters should not overlap at all!

Kerning
Kerning is the spacing between letters. Again, like leading this seems like an obvious one, but still needs careful attention. Consider if your typeface generally needs spacing out more, or if it looks better with tighter kerning. I always prefer helvetica and futura manually tightened as they have quite a bit of space between letters on the normal setting. Also it is worth taking special care with specific characters. Again, no characters should overlap. An example of this is for helvetica r and t characters together. Be worth kerning manually in this case.

Accent or emphasise
This can help bring out key words and also break up large sections of text. Large chunks of copy tend to be quite scary, and ideally people like to skim. A subtle emphasis can bring out key words. A different colour, slightly darker perhaps or a slightly bolder version of the font are nice techniques.

Do not over emphasise
Emphasis in a body of text should be kept simple and elegant. I either use bold, italic or underlined. Too much, just makes a page look messy.


No caps in body text
This one is simple enough. Never use capitals in body copy, it is just not as legible. Enough said.
Always align to a baseline
Keep text in simple horizontal lines. This is another body text rule and again seems pretty obvious. Ideally you use a baseline grid throughout. More details of how to that here.

Flush left ragged right
Always keep the text left aligned and don’t justify. This is legible and does not look messy. Justifying text across a smaller column especially creates massive gaps or ‘rivers’ in the type. Don’t do it.

Lines not too long or short
Line length is also important. It helps legibility and prevents your eye from slipping up or down a line in a large body of text. My rule is do not have less than 6 words or more than 12 in a single line. Use columns in a page to make this structured and easy. Your page will be neater and more legible.
Punctuation and Bullet points
Punctuation marks and bullet points are something which is easily forgotten in typography. Modern design software does not make it easy for us to handle this correctly. Bullet points, should ideally be in the page margin. Not indented. Likewise, punctuation marks should be in the margin as well. The image below from Mark Boultons site illustrates this perfectly. You can see a tutorial for bullet points here, and punctuation marks here.


The fibonnaci sequence
the first two Fibonacci numbers are 0 and 1 and each other number is a combination of the previous 2. These numbers are meant to have a natural visual elegance to each other. Since the Renaissance, many artists and architects have proportioned their works to approximate the ‘golden ratio’. Therefore in typography it is a good suggestion to consider using only these numbers to structure your chosen point sizes to. It will give your whole document a natural elegance.
0 1 1 2 3 5 8 13 21 34 55 89 144…
Conclusion
Typography is a massive subject and I am sure many will disagree with the suggestions I have made. Remember these rules are always made to be broken. With knowlege and experience comes the decision if it is appropriate to stick to or break these rules. These rules are kind of beginners guide to typography. Stick to them and I think you can’t go far wrong.
Hope you have found useful. If you have any to add, please leave a comment.

Five simple steps to better typography

I’ve struggled a bit with the latest addi­tion to this ‘simple steps’ typo­graphy series. Mostly because it’s not so simple and it’s a bit more of a grey area than the pre­vi­ous three articles.

Typo­graphic hier­archy, put simply, is how dif­fer­ent faces, weights and sizes of typefaces struc­ture a doc­u­ment. Some of these hier­arch­ical devices are well-established con­ven­tions, such as cross heads and folios, so I’m not going to touch on them in this post. To keep it simple I’m going to con­cen­trate on two things — size and weight. The first of which is size.

First off a bit of history.

Early typo­graph­ers cre­ated their manu­scripts by using one font, one size, one col­our mostly, inter­spersed with hand painted illu­min­a­tions. The products of such typo­graph­ers has a flat qual­ity to the inform­a­tion, almost mesmeric.
Take a look at some early manu­scripts and the typefaces them­selves, espe­cially the older Black let­ter styles, appear sim­ilar — m’s look like u’s, y’s look like p’s and so on. As beau­ti­ful these manu­scripts are, other than the illu­min­a­tions, they are devoid of struc­ture within the con­tent. There is no typo­graphic hierarchy.

Evol­u­tion of the scale

In the six­teenth cen­tury, European typo­graph­ers developed a series of typeface sizes, a scale (the musical ana­logy is a good one — stick with me). As shown in the dia­gram they are sizes we’re are all famil­iar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hun­dred years. In fact, they are the default font sizes in many applic­a­tions (give or take a few.).

So, what’s so spe­cial about these sizes? Well, because this scale of sizes has been used for cen­tur­ies, if set cor­rectly, type set in this scale will appear more pleas­ing to the eye and there­fore more legible.
An inter­est­ing point. Ori­gin­ally the sizes in the scale were referred to by name instead of by point size. here’s a few examples of some of the older names:

6pt: non­pareil

7pt: min­ion

8pt: brevier or small text

9pt: bour­geois or gal­liard

10pt: long primer or gara­mond

11pt: small pica or philo­sophy

12pt: pica

14pt: eng­lish or augustin

18pt: great primer

21pt: double small pica or double pica

24pt: double pica or two-line pica

36pt: double great primer or 2-line great primer

New soft­ware, and mod­ern meth­ods of type­set­ting, has allowed char­ac­ter heights which fall out­side of, and within, this scale. this free­dom has res­ul­ted in a typo­graphic free for all, allow­ing design­ers to pick sizes which may not be related to one another as accord­ing to this scale. Is this a bad thing? I’d argue that it is.
Let’s go back to the music ana­logy. It’s like com­pos­ing a dis­cord­ant piece of music. Clash­ing notes, clash­ing type. but, if it’s clash­ing you’re after, that’s fine. If, how­ever, you’re after har­mony and melody that stands the hairs up on the back of your neck, stick to the notes in the scale folks!

Applic­a­tion of the scale

So let’s put some of this into prac­tice. I’m going to be using this very web­site as an example.
I star­ted off design­ing this web­site with some­thing very spe­cific in mind — typo­graphy. I wanted to make sure this site would work by a simple, clear hier­archy of typo­graphy set against a simple mod­u­lar grid, with plenty of white space on which to ‘hang’ a num­ber of design ele­ments (in my port­fo­lio for example).
Fol­low­ing the typo­graphic scale described in the pre­vi­ous sec­tion, I set about apply­ing this to the CSS based design.
These are the ele­ments for the typo­graphic hier­archy. Note, I’m using pixels as my base meas­ure­ment, not points. And yes I do know the pixel’s are dif­fer­ent on dif­fer­ent platforms.
The thing about type sizes in CSS is if you want to remain true to typo­graphic tra­di­tion, you have to spe­cify em’s or per­cent­ages based on an abso­lute unit of meas­ure­ment, in this case a pixel. If you use the rel­at­ive — small, x-small etc. — there aren’t enough declar­a­tions to com­plete the scale and the siz­ing of each incre­ment is fixed at 1.5 going up the scale or 0.66% going down. (appar­ently this depends and was also changed to some­where between 1.0 and 1.2 in CSS2.) But any­way, I don’t want to get fix­ated on the best CSS approach to this. This art­icle is about typography.
These are the pixel sizes for my main headings:

1. 11px /16.5px — Body copy and leading.
2. 24px — Main head­ing used as sec­tion head­ings on the Homepage, Port­fo­lio homepage and entries.
3. 18px — Head­ings for journal entries and port­fo­lio subheadings.
4. 16px — All nav­ig­a­tional and con­tent ter­tiary headings.
5. 13px — All other headed elements.

This would give me the fol­low­ing styles visually

These trans­late into the fol­low­ing way into CSS, using per­cent­ages for scal­ing purposes.

1. 11px /1.5em — Body copy and leading.
2. 218% — Main head­ing used as sec­tion head­ings on the Homepage, Port­fo­lio homepage and entries.
3. 164% — Head­ings for journal entries and port­fo­lio subheadings.
4. 145% — All nav­ig­a­tional and con­tent ter­tiary headings.
5. 118% — All other headed elements.

So, within my CSS file, it looks like this:

body {
font: 11px/1.5em "Lucida Grande";
}

h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}

h1 {
font-size: 218%;
}

h2 {
font-size: 164%;
}

h3 {
font-size: 145%;
}

h4 {
font-size: 118%;
}

Using these val­ues for the size of the head­ings cre­ates a nat­ural rela­tion­ship between them. The typo­graphy is har­mo­ni­ous as a res­ult and it only took about five minutes to imple­ment. Not long at all.

Size really does matter

It really does. If you take any­thing away from this series, please let it be this. Stop and think about your type sizes, just for five minutes. Plan them, don’t just choose whatever you feel like from the drop­down in Pho­toshop. Make sure they are ‘in tune’ and then apply the the­ory to whatever medium you are design­ing to.
Next up the series we fol­low on from this with weight.

The series

This is the fourth install­ment of this “Simple Steps…” series. Next up we have Typo­graphic Hier­archy — weight

1. Meas­ure the measure

Typo­graphy, I find, is still a bit of mys­tery to a lot of design­ers. The kind of typo­graphy I’m talk­ing about is not your typ­ical “What font should I use” typo­graphy but rather your “know­ing your hanging punc­tu­ation from your em-dash” typo­graphy. Call me a little bit pur­ist but this both­ers me.
So, in an attempt to spread the word here’s the first of five simple steps to bet­ter typo­graphy. To kick it off, part one is about the Measure.

Meas­ure the Measure.

The Meas­ure is the name given to the width of a body of type. There are sev­eral units of meas­ure­ment used for defin­ing the Measure’s width. The three basic units are:

• One point = 1/72 of an inch
• One pica = 12 points
• One em = The dis­tance hori­zont­ally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for cor­rect­ing me on this.)

But, with the advent of DTP pack­ages and the web­site design the fol­low­ing are also now used:

• Mil­li­metres
• Pixels

There is an optimum width for a Meas­ure and that is defined by the amount of char­ac­ters are in the line. A gen­eral good rule of thumb is 2–3 alpha­bets in length, or 52–78 char­ac­ters (includ­ing spaces). This is for legib­il­ity pur­poses. Keep your Meas­ure within these guidelines and you should have no prob­lem with legib­il­ity. Please note that this fig­ure will vary widely with research, this is just the fig­ure I use and it seems to work well as a gen­er­ally rule of thumb.

CSS and fluid?

What is inter­est­ing here is fluid designs on the web. How can a Meas­ure react to an increase and decrease in size. The entire grid would have to adapt to that change. An inter­est­ing dis­cus­sion point and challenge.

The Meas­ure and leading.

A simple rule is your lead­ing should be wider than your word spa­cing. This is because when the bal­ance is cor­rect, your eye will move along the line instead of down the lines.
If your meas­ure is wider than the guidelines for optimum legib­il­ity then increase the lead­ing, or line-height as it’s some­times wrongly called. This will have the effect of increas­ing legib­il­ity. Your lead­ing should increase pro­por­tion­ally to your Meas­ure. Small Meas­ure, less lead­ing. Wide Meas­ure, more lead­ing. It’s a simple but effect­ive rule.

Revers­ing out?

When revers­ing col­our out, eg white text on black, make sure you increase the lead­ing, track­ing and decrease your font-weight. This applies to all widths of Meas­ure. White text on a black back­ground is a higher con­trast to the oppos­ite, so the let­ter­forms need to be wider apart, lighter in weight and have more space between the lines.

Track­ing

The gen­eral rule of thumb in track­ing your words (not the char­ac­ters) is that the shorter the line length the tighter the track­ing, the oppos­ite is also true.

Your respons­ib­il­ity

Fol­low­ing these simple rules will ensure your bod­ies of text will be as legible as they can be. These rules come from a typo­graphic craft back­ground which unfor­tu­nately, for our industry in par­tic­u­lar, aren’t being taught as much as they should be in the art schools around the world. As a res­ult they aren’t being prac­ticed and cor­rect, well-considered typo­graphy is tak­ing a nose-dive.
It’s our respons­ib­il­ity, as design­ers, to embrace the rules which are born of a craft which goes back hun­dreds of years.
Hope­fully, this series of quick, sure-fire ways of improv­ing your typo­graphic craft will help in some way make sure com­puters and DTP doesn’t kill it off. That would be a great shame.

The series

This is the first install­ment of this “Simple Steps…” series. Next up we have Hanging punctuation

1. Meas­ure the measure

1. Hanging punc­tu­ation

anging punc­tu­ation is an area of typo­graphic design which has suffered at the hands of cer­tain soft­ware products. It’s a term which refers to glyph pos­i­tion­ing to cre­ate the illu­sion of a uni­form edge of text.
It’s most com­monly used for pull-quotes, but I feel the most neg­lected is that of bul­leted lists.

With the advent of desktop pub­lish­ing it became sud­denly very easy and cost-effective to pro­duce bod­ies of text. The prob­lem was these bod­ies of text work within a box. Every char­ac­ter in this box had to be within the box, Hanging Punc­tu­ation requires char­ac­ters to be out of the box. This was a prob­lem for the soft­ware and as a res­ult was ignored. An import­ant aspect of type­set­ting just swept under the car­pet like that. It’s a great shame.
Things are now get­ting bet­ter with Adobe Indes­ign offer­ing sup­port for Hanging Punc­tu­ation, I think the latest ver­sion of Quark may do it as well. Not sure about Word — prob­ably not.
Well enough of the talk, let’s get down to some examples.

Examples of Hanging Punctuation

Lists

Without Hanging bullets

A ranged left body of type is pretty much des­troyed, aes­thet­ic­ally, when punc­tu­ation isn’t hung. The eye looks for straight lines every­where, when type is inden­ted in this way, it des­troys the flow of text.

With Hanging bullets

With hanging punc­tu­ation the flow of text on the left hand side is unin­ter­rup­ted. The bul­lets, glyphs or num­bers sit in the gut­ter to high­light the list. This rep­res­ent­a­tion of a list is more soph­ist­ic­ated visu­ally and more legible.

Pull-quotes

Without Hanging Punctuation

Noth­ing is more irrit­at­ing than badly type­set quotes. The inter­rup­tion to flow is con­sid­er­able and the over­all effect is pretty unsightly

With Hanging Punctuation

Quo­ta­tion marks should be ‘hung’ — See dia­gram below. In this example the quo­ta­tion marks are hung either side of the quote. Once again this allows unin­ter­rup­ted read­ing for the audience.

Hang it!

So, in short. Hang lists and hang quo­ta­tion marks, when using pull quotes and quotes within a body of text.
And before you say “Mark, you don’t hang your lists on this site”, I will be, soon. The com­ments list is hung, I just need time to hang the bul­leted lists… I get to it ok?

The series

This is the second install­ment of this “Simple Steps…” series. Next up we have Ligatures

1. Hanging punc­tu­ation

1. Lig­at­ures

I’m pleased this series is turn­ing out to be so pop­u­lar and it’s some­what con­firmed what I sus­pec­ted. A bit of a thirst for simple typo­graphic design theory.

As I’ve been writ­ing this series i’ve deluged by email and com­ments from people agree­ing, dis­agree­ing, ask­ing for more inform­a­tion etc. What’s great is design­ers are think­ing and talk­ing about typo­graphy again. Design­ers are ques­tion­ing typo­graphy and not just let­ting the font and the soft­ware do the work. It’s nice to hear. But enough back-slapping Mark, on with the next in the series…
The third install­ment of this series is ded­ic­ated to just one typo­graphic ele­ment — Lig­at­ures.

Lig­at­ures are com­bin­a­tions of let­ters — some of them are func­tional, some are dec­or­at­ive. They are more com­monly seen in serif faces, although lig­at­ures in sans-serif faces such as Gill Sans and Scala Sans are import­ant to the typeface and should be used.
They are gen­er­ally com­prised of cer­tain char­ac­ters which are cre­ated to stop col­li­sion of ele­ments of let­ter­forms. Take the let­ter f of a serif typeface. In lower case, espe­cially italic, the top and tail of the f move into the char­ac­ter space next to it. These over­laps are what typo­graph­ers call kerns.

It’s when these over­laps col­lide with let­ters next to them that we have prob­lems. Take lower case f and lower case i, prob­ably the most widely used lig­at­ure. When set in Roman (A, above), the ascender of the f col­lides with the dot of the i, the effect is much worse when set in italic (B, above). Type design­ers there­fore com­bined the char­ac­ter into the fi lig­at­ure. As you can see, the dot from the i is simply removed.

Lig­at­ures and lan­guage have been closely tied through­out typo­graphic his­tory. Typo­graph­ers in the six­teenth cen­tury devised lig­at­ures to cope with com­mon occur­rances of let­ters in latin — fi, ffi, fl, ffl, ff (shown above). You will find at least a couple of these in most fonts. But, as lan­gage has changed to encor­por­ate dif­fer­ent words, espe­cially eng­lish, the need for more obscure lig­at­ures has grown.
Take the word fjord for example. The ascender of the f will col­lide with the dot of the lower case j. This is resolved the same way as the fi lig­at­ure in that the dot is removed from the j. The trouble with less com­mon lig­at­ures like this is that they gen­er­ally aren’t in the stand­ard char­ac­ter set of a font, so we kind of have to make do or if set­ting type in a pro­gram like Adobe Illus­trator, make them by hand. And this brings me neatly onto prac­tical usage of ligatures.

Usage in print

I tend to use lig­at­ures spe­cific­ally for head­lines. Occa­sion­ally, if the job demands it, I will use lig­at­ures for body copy as well but this does tend to make type­set­ting a little time consuming.
If for example I’m cre­at­ing a logo­type for a cof­fee shop called “Flow’s fine beans” (a con­veni­ent amount of lig­at­ures present there!). The name could simply be set in a font which does not require lig­at­ures, but this could make the logo­type quite plain. The font chosen could be serif, but spe­cial care must be given to the kern­ing and over­all appear­ance when set­ting logo­types that use ligatures.

This logo­type, shown above, is simply typed using Mrs Eaves. See how the lig­at­ures appear too close to each other cre­at­ing dense areas of type. The gaps between cer­tain let­ter­forms are also unset­tling to the eye. This needs to be manu­ally kerned.

If the type is set care­fully the lig­at­ures add typo­graphic interest to the words. They add char­ac­ter and begin to tell a story about Flow’s shop — it’s a classy place, nice cof­fee too!
So, care­ful atten­tion to detail at this stage can help define a logo­type and go a long way to help define brand mes­sage — all through the simple use of ligatures.
But what about on the web?

Usage on the web

Lig­at­ure usage on the web is a bit tricky. Func­tion­ally there are spe­cial char­ac­ters for the fol­low­ing lig­at­ures — these are needed for lin­guistic reasons.

Æ	Æ	Cap­ital AE
æ	æ	Lower-case ae
Œ	Œ	Cap­ital OE
œ	œ	Lower-case oe
Ð	Ð	Icelandic upper-case eth
ð	ð	Icelandic lower-case eth
ß	ß	Ger­man double-s
Þ	Þ	Icelandic upper-case thorn
þ	þ	Icelandic lower-case thorn

They should be present in body copy and head­line copy for those lan­guages that require them. What HTML doesn’t cater for is the use of the five main lig­at­ures — fi, ffi, fl, ffl, ff within the spe­cial char­ac­ter codes. The fonts gen­er­ally do have these lig­at­ures present but it’s debat­able whether they needed to be used on screen or not.
I tend to only use lig­at­ures for on screen use if I’m cre­at­ing logo­types, or graph­ical head­ers or ele­ments that require them. In this instance all use of lig­at­ures is fine. There are many people who dis­agree, stat­ing that lig­at­ures are a relic of by-gone age. I dis­agree. The use of lig­at­ures in your type­set­ting, for print or on screen, shows a typo­graphic matur­ity and an under­stand­ing of the craft.

The series

This is the third install­ment of this “Simple Steps…” series. Next up we have Typo­graphic Hierarchy

1. Meas­ure the measure
2. Hanging punc­tu­ation
3. Lig­at­ures

1. Typo­graphic Hier­archy — weight

The final part in this series, I’m glad to say is a little more cut and dry than the last in the series. It’s more about his­tor­ical typo­graphic the­ory but with a simple, prac­tical guide to ensur­ing a bal­anced use of typeface weights.

Typeface weight, and the choice of weight, is per­haps one area of typo­graphy that to most design­ers is simply a mat­ter of choice. That choice is dic­tated by answer­ing a design prob­lem which is aes­thet­ic­ally, or con­tent, motiv­ated. What many design­ers do not real­ise is that there are rules which should gov­ern the choice of weight — a typo­graphic peck­ing order — which when fol­lowed, aids the designer’s type­set­ting and can pro­duce stun­ning results.

Solv­ing the design problem

Let’s start by address­ing the root of the decision to set type in dif­fer­ent weights — solv­ing a design prob­lem. I men­tioned that this prob­lem stems from two main areas:

1. An aes­thetic prob­lem. This is where the designer sets type dif­fer­ently to add style or solve some kind of visual or com­pos­i­tional issue. 
2. A con­tent prob­lem. The designer needs to set a dif­fer­ent weight because the con­tent dic­tates it. The lan­guage of the con­tent may dic­tate spe­cial typo­graphic treat­ment, the tone of voice may be dif­fer­ent, it may be a quote, it may be a struc­tural device such as folios.

There may be other reas­ons as well, but I believe these are the main cause.

First off a bit of history

I like these his­tory bits, they really are inform­at­ive. To research where the rules came from and why they should be fol­lowed goes a long way to ensur­ing they are used.
Upper­case and Lower­case, and the rela­tion­ship between them, have been around for over twelve hun­dred years. Small Caps, orna­ment­als and arabic fig­ures were early addi­tions to the roman.
Ital­ics were a strange bunch to begin with. They didn’t asso­ci­ate them­selves with lower case roman, as we usu­ally see today, but with roman caps and small caps. It’s only in recent times that usage of italic, within roman, was deemed to be typo­graph­ic­ally correct.
Some of the new­est addi­tions to the weights of typefaces came with bold, and con­densed, as late as the early nine­teenth centry. These were gen­er­ally used in place of ital­ics and small caps. Bold typefaces have now become a stand­ard way of dif­fer­en­ci­at­ing in type­set­ting, par­tic­u­larly on screen where ital­ics are a little more dif­fi­cult to read.
A type fam­ily with all of these weights forms a bal­anced series which is no only his­tor­ic­ally accur­ate but cre­ates har­mo­ni­ous typo­graphy. If the set­ting of copy was reversed, so ital­ics were used as body copy, Caps was used as pull-quotes and bold was used as access struc­ture (folios, run­ning heads etc) not only would the body of text look ter­rible, it was also be very dif­fi­cult to read.

The prac­tical bit

So, we have these weights of a typeface and they all relate to each other, and there’s a hier­achy. How is this prac­tical in every­day use?
First off we need to show the dif­fer­ent weights and how they are related to each other. Then we cat­egor­ise them into a hier­ach­ical list, from primary to sex­tary. This is shown in the dia­gram below.

Exe­cu­tion of dia­gram inspired by Robert Bringhurst’s ‘Ele­ments of Typo­graphic Style’

This list, as it stands, may not be that use­ful. It does illus­trate how­ever the rel­at­ive import­ance of cer­tain typeface weights. It comes into prac­tical use in the fol­low­ing diagram.

Exe­cu­tion of dia­gram inspired by Robert Bringhurst’s ‘Ele­ments of Typo­graphic Style’

Here you can see some of the weights set out and joined by lines. The red lines rep­res­ent the core typeface fam­ily. Some typo­graph­ers would argue that without these core weights, typefaces are reduced to being used for titles only. I’ll leave that one open for debate!
The other lines show how design­ers can move along the lines when set­ting type. for example, if a designer has set type in roman and they need to add emphasis to a cer­tain point in the copy. They would fol­low the lines to any on the second line — bold lower case, small caps, full caps, italic lower case or sloped small caps. If they were to jump to, say, bold italic lower case, or a more extreme example, bold sloped caps, the effect would be horrible.
If the designer is set­ting type in bold lower case they could go on to add bold caps, or bold italic lower case without much bother. You get the idea?
So, fol­low­ing this simple roadmap can ensure that your typo­graphy adheres to some simple hier­ach­ical rules and as a res­ult your typo­graphy will take on a har­mo­ni­ous feel. don’t just take my word for it though, set some type, use the rules and you’ll see.

A final word

I’ve enjoyed writ­ing this series. What ini­tially star­ted as a quick five tips turned into some­thing a little more involved and has sparked quite a lot of debate. I’m pleased it’s bring­ing tra­di­tional design stuff into the web stand­ards realm, there really is so much more we can learn and put to good prac­tice in this par­tic­u­lar corner of the industry.
Typo­graphy is one of those things that has unfor­tu­nately suffered from the advent of tech­no­logy (and i’m not just talk­ing about com­puters here). Design­ers on the whole have divorced them­selves from the let­ter­forms and the set­ting of them. As a res­ult they’ve for­got­ten, or not been made aware of, the simple type­set­ting rules which were core to the old sys­tem of print­ers apprentice.
Typo­graphy to me is about design. It’s about words and the con­vey­ing of mean­ing. It’s about set­ting words that people read. A cer­tain amount of it is cre­at­ive, a cer­tain amount is expres­sion and aes­thet­ics, but mostly it’s about people read­ing stuff. Do them a favour and don’t make it difficult.
This is the fifth, and last, install­ment of this “Simple Steps…” series.

1. Typo­graphic Hier­archy — weight

Metric typographic units

Typography is an old art. Long before the introduction of the international standard system of units (“metric system”), printing equipment manufacturers all over the world have established a bewildering variety units to measure length, many of which continue to be used today:

• 1 point (Truchet) = 0.188 mm (obsolete today)
• 1 point (Didot) = 0.376 mm = 1/72 of a French royal inch (27.07 mm)
• 1 point (ATA) = 0.3514598 mm = 0.013837 inch
• 1 point (TeX) = 0.3514598035 mm = 1/72.27 inch
• 1 point (Postscript) = 0.3527777778 mm = 1/72 inch
• 1 point (l’Imprimerie nationale, IN) = 0.4 mm
• 1 pica (ATA) = 4.2175176 mm = 12 points (ATA)
• 1 pica (TeX) = 4.217517642 mm = 12 points (TeX)
• 1 pica (Postscript) = 4.233333333 mm = 12 points (Postscript)
• 1 cicero = 4.531 mm = 12 points (Didot)

The printing and publishing software market is at present dominated by manufacturers (Apple, Adobe, Microsoft, Quark, etc.) located in the United States, the last country on the planet that has yet to make significant progress towards the introduction of modern standard units. As a result, the use of standard units is far from well established in digital typography, to the significant annoyance of users all over the world.
The main problems are:

• The dominant unit of length, the Postscript point, has with 25.4/72 = 0.352777... mm a very inconvenient relationship to the most widely used length units (meter and millimeter).
• There exists no well-established practice for denoting a font size. [One example of a somewhat established convention is to specify the length of an “em” in PostScript points. Historically, the “em” was the width of the widest metal type in a font, which was for Roman fonts typically the capital letter “M”. Today, the control points of digital font outlines are stored in terms of coordinates inside a unit square. This square is a vague equivalent of the historic maximum metal type size and its side length has become the modern incarnation of the “em”. As a result, no easily measurable dimension in a text matches the point length that designates a font size]
• Resolutions of output devices are still frequently specified in dpi (dots per inch), which is the reciprocal value of the pixel size multiplied with 25.4 mm.

With the metric system, we have now a well established, consistent, and globally accepted set of length units, ranging from subatomic to cosmological dimensions. The use of archaic ad-hoc special purpose units has become obsolete and should be strongly discouraged.
It is time that the typographic community finally abandons its current unit mess in two ways:

• adopt the metric system
• denote font sizes based on a measurable characteristic length of the printed glyphs

Metric typographic units are already used in Japan and to some degree in Germany and other European countries. However, the market dominance of US-originated typographic software without proper support for metric units at all levels currently hinders the further deployment of metric typographic practice.
The German draft standard DIN 16507-2 suggests that all length measurements in digital typography should be specified in millimeters. It suggests further that dimensions should be multiples of 0.25 mm, or where a finer resolution is required multiples of 0.1 or 0.05 mm.
No more points, picas, ciceros, inches, etc. and all their awful conversion factors.
Japanese typesetters use the unit Q (quarter) for font sizes, where 1 Q = 0.25 mm, i.e. the same modulus recommended by DIN 16507-2.
This measure coincides nicely with the most common pixel size on computer monitors. For example a typical CRT screen has a display area of 320×240 mm, divided into 1280×1024 pixels, which makes each pixel 0.25 mm large.

Font sizes

DIN 16507-2

This draft standard defines (among many others) the following two font measures:

Font size (German: Schriftgröße)

This is the baseline distance for which the font was designed. A font should normally be identified and selected by this size, because the intended baseline distance is much more relevant for practical layout work than the actual dimensions of certain characters.

Font height (German: Oberhöhe)

This is the height in mm of letters such as k or H. Typically, the font height is around 72% of the font size, but this is of course at the discretion of the font designer.

If we write say “Helvetica 5.0”, then this means we have a font that was designed for a 5 mm line spacing. It will typically have an H that is 3.6 mm or 10.2 points tall (72% of 5 mm). Calculations become trivial: in a 60 mm high column, we can write exactly 60 mm / 5 mm = 12 lines. The baselines of text become neatly aligned with a millimeter grid, and if millimeters are used to describe both font size and font height, their relationship becomes easier to handle than if different units such as mm and points were used. Layout designers do not have to juggle any more with conversion factors such as 72.27 and 25.4. If you write “Helvetica 5.00/5.25” then this means that you use exactly the same font as above, but with 0.25 mm more baseline skip than it was designed for.
DIN 16507-2 contains a list of preferred metric font sizes, together with the corresponding preferred 72% font heights in mm. The table below shows, in addition to these values from the standard, the corresponding preferred 72% font heights in Postscript points, for easier comparison with the old font sizes. Note: the point sizes of US fonts do not always refer to the k/H height that is defined by DIN as the font height. Some font manufacturers (e.g., Knuth) also refer to the size of taller characters such as “(”, so be careful not to convert incompatible measurements. Instead, try to find out the baseline distance for which a font was originally designed if you want to convert properly to metric sizes.

Font Size   Font Height    |   Font Size   Font Height
      [mm]      [mm]  [pt]     |     [mm]      [mm]  [pt]
  -----------------------------+----------------------------
      1.5        1.1   3.1     |      6.0       4.3  12.2
      1.75   1.3   3.6     |      7.0       5.0  14.3
      2.0  1.4   4.1     |      8.0       5.8  16.3
      2.25  1.6   4.6     |      9.0       6.5  18.4
      2.5  1.8   5.1     |     10.0       7.2  20.4
      2.75  2.0   5.6     |     12.0       8.6  24.5
      3.0  2.2   6.1     |     14.0      10.1  28.6
      3.25  2.3   6.6     |     16.0      11.5  32.7
      3.5  2.5   7.1     |     18.0      13.0  36.7
      3.75  2.7   7.7     |     20.0      14.4  40.8
      4.0  2.9   8.2     |     22.5      16.2  45.9
      4.25  3.1   8.7     |     25.0      18.0  51.0
      4.5  3.2   9.2     |     27.5      19.8  56.1
      5.0  3.6  10.2     |     30.0      21.6  61.2
      5.5  4.0  11.2     |     35.0      25.2  71.4

(The above mm values are from the old DIN 16507-2:1984-05 draft. If you implement metric font sizes, please make sure you get the latest version of the actual standard from DIN.)
Again: The font size refers to the baseline distance for which the font was designed, and is used to generally identify the font. The font height is the actual height of characters such as H or k. The font height is typically 72% of the font size as a preferred value, but this is of course left to the discretion of the font designer. One writes “Courier 6.0” to get the Courier font designed for 6 mm baseline distance (where the height of an H is typically 4.3 mm or 12.2 pt), and one writes “Courier 6.0/9.0” to get the same font but to use it with 50% more space between the lines.

Other proposals

Authors such as (Ó Brógáin, 1983) argue instead that font sizes should be based on the x-height. This clearly has a number of advantages:

• The x-height can easily be measured directly in a sample printout and is not an invisible dimension found only in font data.
• Whether two fonts appear to have the same height is primarily determined by whether their x-heights match.
• The concept of x-height is also present in Greek and Cyrillic typography. Hebrew, Arabic and Devanagari glyphs can be aligned quite nicely with a Roman x-height, too.
• Recommended baseline distances are often related to the x-height (2 seems to be a very common factor), therefore using the x-height as a reference dimension will in practice often also lead to round measurements for the baseline distance.

Possible disadvantages of using the x-height as the reference dimension for denoting a font height might:

• In some applications (e.g., traffic and warning signs in some countries), text is commonly written uppercase only, or consists only of digits, so there are no visible lowercase letters as a measurement reference. However, as the fonts used in these applications usually also include lowercase characters, therefore the x-height is always well-defined (except for some numeric-only display devices such as 7-segment LEDs).
• Chinese characters are more easily aligned with the H-height of Roman characters. However, as East Asian fonts typically also contain Roman lowercase characters, the x-height is always a well-defined quantity here, too.

Draft proposals for an international standard on font sizes drawn up in the late 1970s were based on the height of capital letters and did not find international agreement.
Both x-height and the size of capital letters is an attribute stored in existing font files, therefore scaling font sizes such that the x-height or H-height matches a specified length in millimeters is quite trivial to implement on top of existing font management mechanisms.
An idea that might at least be worth considering is to define a series of preferred font sizes. Unlike the values given in DIN 16507-2, this could be a geometric series in which the quotient of neighboring sizes approximates a root of the square root of two. The international standard paper sizes were designed to be magnified and reduced by factors of sqrt(2) or sqrt(sqrt(2)), and for example standard technical drawing pen sizes follow the same progression. Such a series of standard font sizes could either be designated in a millimeter length and made available via pull-down menus, or it could be designated by an index number, as is already done for ISO paper sizes.

Metric device resolutions

Instead of giving a reciprocal pixel size in dpi, it would be much more convenient to specify the pixel size directly in micrometers, as it is also common practice in the semiconductor industry.
The following table shows a few commonly used typesetting resolutions in both µm and dpi:

µm	10.0	20.0	21.2	40.0	42.3	80.0	84.7	100.0	250.0	254.0
dpi	2540	1270	1200	635	600	317	300	254	102	100

So far, phototypesetters have traditionally used metric resolutions (with 10 µm = 2540 dpi being most common one), while laser and inkjet office printers currently still mostly have inch-based resolutions.

Metric modes in layout software

While US-originated typographic software frequently does allow to switch into some sort of metric mode, these metric modes usually have lots of loose ends and were obviously never used in daily work by their developers. Add-on metric modes often suffer from bizarre rounding bugs (you enter 210 mm and always get ugly 209.902777 mm displayed, alignments on metric grids do not work out, startup defaults are often fixed to US units, etc.), and the metric support stops at critical details like the font or pixel size, such that in the end metric users still have to constantly convert between millimeters, points, inches, and 1/inches. US developers should realize that over 95% of the world population grew up using the metric system and that it is therefore prudent to design a system today from the very lowest level up purely in metric units. Conversion to archaic units like the inch and the various points should only be an add-on feature in the user interface on top of an underlying purely metric architecture, and not the other way round.
One font handling system design that got things right is the W3C’s CSS2 specification. Here, a DIN 16507-2 font description of the form “Helvetica 4.0/4.5” can directly be written as

P { font: 4mm/4.5mm "Helvetica" }

Also the ISO 9541 font file format uses millimeters to denote font design sizes (see ISO/IEC 9541-1:1991, section 8.6.17).

Literature

The titles of some relevant DIN, BSI and ISO standards are

• DIN 16507-1, Ausgabe: 1998-09, Drucktechnik – Schriftgrößen, Maße und Begriffe - Teil 1: Bleisatz und verwandte Techniken
• DIN 16507-2, Ausgabe: 1999-05, Drucktechnik – Schriftgrößen – Teil 2: Digitaler Satz und verwandte Techniken
• BS 4786:1972, Specification for metric typographic measurement (withdrawn)
• ISO/IEC 9541-1:1991, Information technology — Font information interchange — Part 1: Architecture.

Unfortunately, the DIN standards on metric typography seems to be available at the moment only in German. I hope that a standardization group such as ISO/TC130 will eventually set up a very similar international guideline for the use of metric font sizes.
Further literature:

• Ernest Hoch: International unification of typographic measurements. Penrose annual, Vol. 60, Lund Humphries, London, 1967, pp. 24-26.
• Ernest Hoch: Typographic metrication. Penrose: international review of the graphic arts, Vol. 70, Northwood Publications, London, 1977, pp. 123-135.
• Séamas Ó Brógáin: Typographic measurement: a critique and a proposal. Professional Printer 27, pp. 9-14, 1983, ISSN 0308-4205. (summarized in The Cambridge Encyclopedia of Language, p. 192)
• Josef Rommen: Typographic measures. In: Otl Aicher: Typographie. 2. Aufl, 1989, pp. 228-239. (bilingual: German/English)
• Friedrich L. Bauer: Der typographische Punkt. Informatik Spektrum, Vol. 22, No. 1, February 1999, pp. 41-42. (German)

I wish to thank Karlsson Kent and Jörg Knappen for providing valuable information for this text. Comments and suggestions for improvement are always welcome!
You might also be interested in the International Standard Paper Sizes Web page.
Markus Kuhn