May 18th, 2005
Five simple steps to better typography — Part 5
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 historical typographic theory but with a simple, practical guide to ensuring a balanced use of typeface weights.
Typeface weight, and the choice of weight, is perhaps one area of typography that to most designers is simply a matter of choice. That choice is dictated by answering a design problem which is aesthetically, or content, motivated. What many designers do not realise is that there are rules which should govern the choice of weight — a typographic pecking order — which when followed, aids the designer’s typesetting and can produce stunning results.
Solving the design problem
Let’s start by addressing the root of the decision to set type in different weights — solving a design problem. I mentioned that this problem stems from two main areas:
- An aesthetic problem. This is where the designer sets type differently to add style or solve some kind of visual or compositional issue.
- A content problem. The designer needs to set a different weight because the content dictates it. The language of the content may dictate special typographic treatment, the tone of voice may be different, it may be a quote, it may be a structural device such as folios.
There may be other reasons as well, but I believe these are the main cause.
First off a bit of history
I like these history bits, they really are informative. To research where the rules came from and why they should be followed goes a long way to ensuring they are used.
Uppercase and Lowercase, and the relationship between them, have been around for over twelve hundred years. Small Caps, ornamentals and arabic figures were early additions to the roman.
Italics were a strange bunch to begin with. They didn’t associate themselves with lower case roman, as we usually 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 typographically correct.
Some of the newest additions to the weights of typefaces came with bold, and condensed, as late as the early nineteenth centry. These were generally used in place of italics and small caps. Bold typefaces have now become a standard way of differenciating in typesetting, particularly on screen where italics are a little more difficult to read.
A type family with all of these weights forms a balanced series which is no only historically accurate but creates harmonious typography. If the setting of copy was reversed, so italics were used as body copy, Caps was used as pull-quotes and bold was used as access structure (folios, running heads etc) not only would the body of text look terrible, it was also be very difficult to read.
The practical bit
So, we have these weights of a typeface and they all relate to each other, and there’s a hierachy. How is this practical in everyday use?
First off we need to show the different weights and how they are related to each other. Then we categorise them into a hierachical list, from primary to sextary. This is shown in the diagram below.
Execution of diagram inspired by Robert Bringhurst’s ‘Elements of Typographic Style’
This list, as it stands, may not be that useful. It does illustrate however the relative importance of certain typeface weights. It comes into practical use in the following diagram.
Execution of diagram inspired by Robert Bringhurst’s ‘Elements of Typographic Style’
Here you can see some of the weights set out and joined by lines. The red lines represent the core typeface family. Some typographers 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 designers can move along the lines when setting type. for example, if a designer has set type in roman and they need to add emphasis to a certain point in the copy. They would follow 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 setting 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, following this simple roadmap can ensure that your typography adheres to some simple hierachical rules and as a result your typography will take on a harmonious 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 writing this series. What initially started as a quick five tips turned into something a little more involved and has sparked quite a lot of debate. I’m pleased it’s bringing traditional design stuff into the web standards realm, there really is so much more we can learn and put to good practice in this particular corner of the industry.
Typography is one of those things that has unfortunately suffered from the advent of technology (and i’m not just talking about computers here). Designers on the whole have divorced themselves from the letterforms and the setting of them. As a result they’ve forgotten, or not been made aware of, the simple typesetting rules which were core to the old system of printers apprentice.
Typography to me is about design. It’s about words and the conveying of meaning. It’s about setting words that people read. A certain amount of it is creative, a certain amount is expression and aesthetics, but mostly it’s about people reading stuff. Do them a favour and don’t make it difficult.
This is the fifth, and last, installment of this “Simple Steps…” series.
- Measure the measure
- Hanging punctuation
- Ligatures
- Typographic Hierarchy — size
- Typographic Hierarchy — weight
Cheers again for yet another informative article. The only comment I would add is that typography hasn’t merely suffered from technology but by the way it is now taught. Fortunately for me my knowledge of typography ranges from physically creating type on a letterpress, hand rendering type and now setting type by programs such as Quark, Fontographer and In Design. The problem now lies in the fact that people aren’t taught the old processes.
PS Don’t let this be the last article :)
You’re absolutely right Graham. When I went to university to study typographic design, which was ten years ago now, there were only two university’s that had a typographic design undergrad degree. Two. I’m not sure how many there are now or to what degree typography is being taught. But if my brother’s course is anything to go by (he’s attending a graphic design degree at Leeds College of Art), then it’s not up to much.
It’s a real shame.
This won’t be the last article — plenty more where this came from! :-)
“This won?t be the last article — plenty more where this came from! :-)”
We’ll hold you to that:-) Thanks again for what has been a riveting and enlightening series.
I?ll second that. By the way, is that Mrs Eaves you?re using? It?s very nice indeed.
Thanks a lot for your tips — it was very pleasent to read it — everytime a new part of the series was there for us.
I really like it. There’s so much one doesn’t recognize while designing a web page — you opened my eyes for typographie and I want to thank you for doing this.
Thanks for a wonderful series of articles. I agree that typographic design is being almost entirely forgotten. I was fortunate to have taken typography from a teacher who was still part of the old school, teaching hand rendered typography just two years ago. He retired and the class directly after me was “learning” with Illustrator, none of which finished the class with any appreciation for the artform that I could see. It will have to be through individual efforts such as yours that typographic education will have to find a way to carry on. Thanks again!
Very informative! I remember that <style</em> has pages to say on this subject, if anyone wants more reading.
Excellent — this series of articles has arrived at just the right time for me, as I become increasingly interested in learning about the intricacies of typography (and acutely aware of my current limitations).
Reading the comments for all the articles, it seems that a lot of people are in the same boat as me, and have much to thank you for Mark.
One question / thing that confused me; at the bottom of the “weight tree”, should “Bold Sloped Caps” be, um, sloped?
Or have I misunderstood things?
monooso — Thanks, I’m hoping the next few series we be as helpful for people in the industry but will also spark the same sort of debate.
I’m afraid there’s no prizes for spotting the… er… deliberate mistake there.
Sorted now though, ta :-)
Peter G — Yes is is Mrs Eaves although I’ve had to artificially add weights for the sake of this diagram. It’s such a beautiful typeface, but let’s not forget it is a redraw of Baskerville. Credit should really go to him for the original.
Great article. I was wondering what the difference is between false italics (sloped) and what is considered to be real italics. Does this have to do with the way real italics have more roundness to them, or is there more to it than that?
Thanks Nathan. To answer your question, ‘real’ Italic characters are drawn, they are much more refined. Sloped characters are generally created by software, such as Quark XPress or in this case Photoshop, to create the illusion of an italic face. Whilst these sloped characters can sometimes do the job, a true italic face is much more visually sophisticated.
Are you sure there isn’t an uncredited source, inspiration, or derivation for your diagrams here?
I was kind of hinting at that above…
Oh, oops, but due to a silly error, “Elements of Typographic Style” was butchered.
Joe — These two diagrams are standard stuff, at least they were for me, in typographic design degree’s across the world. I remember being taught this theory in my first year in university. So Bringhurst certainly doesn’t own the theory behind these diagrams. Ok, so the execution of them in this article is inspired by those in ‘Elements of Typographic Style’ but certainly not the theory.
But you’re right, for that reason alone they should be credited. I just wanted to clear up the fact that Bringhurst himself is simply displaying well known typographic theory and certainly doesn’t own the copyright to the theory in these diagrams.
Thank you very much for this set of articles. I am in the Multimedia program at my local high school, where our teacher has, this year, been finishing up his Master’s Thesis. Consequently, we get very little formal education, but are expected to learn on our own. I am apt to do so, but when I set out to learn more typographic design (after being inspired by one of his in-class resources), I found very little more than I already knew. This set of articles has been very informative. I am now find less fear of text in Adobe Illustrator, and I realized more uses for Adobe Carlson Pro!
Thank you very much for this fifth article in particular, I found it very intriguing. I’ve always wondered why there is no historical standard set for typography–and of course there is!
And now I’m wondering about these other, more professional fonts: upon searching for the Mrs Eaves font, I only found it for sale, and for a minimum of twenty dollars! Is this the only way of getting them? I certainly love the font!
Again, thank you very much. I’m looking forward to finding new content on your site, Mark.
Kyle: An involved typeface takes years to build. $20 is actually a very low price—many modern faces actually cost more than $100. Remember, the creators and distributors need to eat, too. For some free fonts, you can always check out Font Leech, which showcases good freebies.
If you’re very interested in using classic type, you could always spring the $80 (I think) for an educational copy of InDesign, which comes with a collection, or you could also search eBay for the Adobe Font Folio.
Another good resource to have around is Thinking with Type ($14 from Amazon).
Kyle — No problem, glad they could help. Matt is right with regards to typeface cost. Mrs Eaves is actually quite cheap in comparison to many other typefaces — Helvetica for instance.
One of my lecturers at university was designing his own serif typeface which he’d been designing on and off for seven years and he’d only just completed the lower case and said he was looking forward to getting into the ligatures and kerning pairs. Ten years on, I doubt he’s finished it!
Matt: Thank you very much for the “Thinking with Type” recommendation. The sample pages on Amazon.com have convinced me to buy once I muster up the buying power. Also, what is “classic type”? Is it the standards and rules we have been learning here?
Mark: I’m shocked at how long it takes! What program does one actually use to develop typefaces? Is the data stored with a vector format, bitmap format, or some other format?
Thank you very much! I leave after on last question: Have either of you ever used (or heard of) Exploring the Elements of Design, by Mark A. Thomas, Poppy Evans? It seems to me to be fairly good. I am wondering, however, if you guys could recommend another book.
Again, thank you!
In my mind, classic type encompasses all the well-known faces that Adobe and other experts have recently digitized: Times New Roman, Palatino, Jenson. I’m sure there’s an exact definition, though.
I haven’t heard of “Exploring the Elements of Design”, will have to find out if the library has a copy.
Someone recommended Universal Principles of Design to me, and it’s on sale at Amazon. Haven’t read it yet, though.
Kyle — I guess it comes down to when one would define a design ‘finished’. I know a lot of typographers are very anal when it comes to detail :-)
Most typefaces that I’ve seen developed spend a long time in the sketchbook or on the drawing board. Hours and hours are spent defining the curves which define the individual characters and then the whole typeface.
Eventually these drawings are then transposed into a program like Adobe Illustrator, and then from there taken into a font program such as Fontographer.
Matt — I’d absolutely recommend this book. It is designed where each spread explains an important principle of design from the Golden Section to Fitt’s Law. Excellent reading.
[…] of Mark’s Five Simple Steps to Better Typography: Typographic Hierarchy—size and Typographic Hierarchy—weight. It ends off with a diagram that is used to guide a designer when using different weights and […]
[…] Five Simple Steps for Better Typography […]