May 9th, 2005
Five simple steps to better typography — Part 4
I’ve struggled a bit with the latest addition to this ‘simple steps’ typography series. Mostly because it’s not so simple and it’s a bit more of a grey area than the previous three articles.
Typographic hierarchy, put simply, is how different faces, weights and sizes of typefaces structure a document. Some of these hierarchical devices are well-established conventions, 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 concentrate on two things — size and weight. The first of which is size.
First off a bit of history.
Early typographers created their manuscripts by using one font, one size, one colour mostly, interspersed with hand painted illuminations. The products of such typographers has a flat quality to the information, almost mesmeric.
Take a look at some early manuscripts and the typefaces themselves, especially the older Black letter styles, appear similar — m’s look like u’s, y’s look like p’s and so on. As beautiful these manuscripts are, other than the illuminations, they are devoid of structure within the content. There is no typographic hierarchy.
Evolution of the scale
In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one — stick with me). As shown in the diagram they are sizes we’re are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).
So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.
An interesting point. Originally 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:
New software, and modern methods of typesetting, has allowed character heights which fall outside of, and within, this scale. this freedom has resulted in a typographic free for all, allowing designers to pick sizes which may not be related to one another as according to this scale. Is this a bad thing? I’d argue that it is.
Let’s go back to the music analogy. It’s like composing a discordant piece of music. Clashing notes, clashing type. but, if it’s clashing you’re after, that’s fine. If, however, you’re after harmony and melody that stands the hairs up on the back of your neck, stick to the notes in the scale folks!
Application of the scale
So let’s put some of this into practice. I’m going to be using this very website as an example.
I started off designing this website with something very specific in mind — typography. I wanted to make sure this site would work by a simple, clear hierarchy of typography set against a simple modular grid, with plenty of white space on which to ‘hang’ a number of design elements (in my portfolio for example).
Following the typographic scale described in the previous section, I set about applying this to the CSS based design.
These are the elements for the typographic hierarchy. Note, I’m using pixels as my base measurement, not points. And yes I do know the pixel’s are different on different platforms.
The thing about type sizes in CSS is if you want to remain true to typographic tradition, you have to specify em’s or percentages based on an absolute unit of measurement, in this case a pixel. If you use the relative — small, x-small etc. — there aren’t enough declarations to complete the scale and the sizing of each increment is fixed at 1.5 going up the scale or 0.66% going down. (apparently this depends and was also changed to somewhere between 1.0 and 1.2 in CSS2.) But anyway, I don’t want to get fixated on the best CSS approach to this. This article is about typography.
These are the pixel sizes for my main headings:
- 11px /16.5px — Body copy and leading.
- 24px — Main heading used as section headings on the Homepage, Portfolio homepage and entries.
- 18px — Headings for journal entries and portfolio subheadings.
- 16px — All navigational and content tertiary headings.
- 13px — All other headed elements.
This would give me the following styles visually
These translate into the following way into CSS, using percentages for scaling purposes.
- 11px /1.5em — Body copy and leading.
- 218% — Main heading used as section headings on the Homepage, Portfolio homepage and entries.
- 164% — Headings for journal entries and portfolio subheadings.
- 145% — All navigational and content tertiary headings.
- 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 values for the size of the headings creates a natural relationship between them. The typography is harmonious as a result and it only took about five minutes to implement. Not long at all.
Size really does matter
It really does. If you take anything 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 dropdown in Photoshop. Make sure they are ‘in tune’ and then apply the theory to whatever medium you are designing to.
Next up the series we follow on from this with weight.
The series
This is the fourth installment of this “Simple Steps…” series. Next up we have Typographic Hierarchy — weight
- Measure the measure
- Hanging punctuation
- Ligatures
- Typographic Hierarchy — size
- Typographic Hierarchy — weight
Mark, I know you didn’t want this article to be too much about css but I still want to make a little comment.
When you use pixels as the main measurement for fonts(body rule), the site will not be scaleable in internet explorer which really is the only “modern” browser which can’t change text-sizes if pixels are involved.
The workaround is to use percentage as the main font measurement. 63% or 67% (don’t remember which) gives the same result as 10px. So if you set that in the body, you can set the rest in ems. What’s convient is that you can still think in pixels which most webdesigners do.
1.2 em = 12px e.g.
The only downside to this is that most sites do use pixels. So if someone ever tried changing the textsize in explorer and it didn’t work, they might just leave it. So then when they will get to sites with the scaleability approach, it might show up different than the designer intended.
Contemporary solution? In-site text size javascriptfunctions.
Thanks for a great article!
Great series so far — finding it very interesting and educational.
One thing which may interest you — it is possible to set your CSS body text as a percentage, (defining your EM width), and then set your fonts accordingly. As an example :
/* Set font as 10px initially } */
body {font-size: 62.5%}
/* Set font as 11px, (1.1 times the body) */
p { font-size: 1.1em; }
This allows you to use the em as a relative unit to the percentage defined in the body, which is nice when a user in/decreases the font size in their browser, as it also allows you to define box size, padding and margin using the same unit — in fact, it gives you a way of scaling not only text but your entire grid…
Just thought you migh want an alternative!
Dammit, someone beat me to it!
Hah, that’s too funny.
Thanks for pointing out it’s 62.5% though :).
I’ve never actually tried building a site totally with ems like you suggested. Does it really work well?
It does — I’m redesigning my site right now and the entire layout scales, even images, (although they obviously pixelate). It makes sense to deal with scaling through the browser controls instead of building them in yourself.
The problem comes when you need to work out what 10px is on an element with an em size of something like 1.6ems — takes a bit of working out and I chose my profession because of my (lack of) maths skills.
It’s a very interesting approach, hard though.
My point with IE was that it is the most common browser and users DO spend most of their time on other websites. Most other sites use pixels.
I’m just too concerned about users who tried the text-size menu in IE and then just gave up on it. It might be set to largest and then when they enter your site, that is what they will think it looks like.
I think there is a need for a site zooming capability in browsers. Even though I hate opera, that is one thing it can do.
Anyway, that’s probably enough on that subject for me, let leave some room for other people to discuss the article :) .
Ben / Johan — Thanks guys, this debate is good. The CSS implementation of font sizing has always confused me a bit. On one hand you’ve got people saying you can use pixels, on the other saying you shouldn’t, on the other saying you can’t. It’s pretty confusing.
So Ben one question, how do you know 62.5% is going to correctly render on all platforms/browsers at the correct size? Or should I say the size the designer wants (correct or not).
All “modern” browsers have a medium text size setting of 16px, (you can even rely on IE 6/Win here!), so scaling it to 62.5% gives you a nice workable number like 10px.
Its worth noting that when developing, if you combine your ratio between headings/paragraphs with that percentage technique, you can modify the size of all text at once just by changing the percentage, while maintaining the ratio which is most pleasing and readable.
Thanks Ben, that explains it really well. I’m sure I’ve heard about this before but always doubted if it was actually true — the fact you can rely on all ‘modern’ browsers. So, what happens on older browsers? IE5/PC? It totally screws up I bet?
However, if the user has customised their default size to something other than 16px, you could end up either with extremely tiny or very large fonts.
I can’t think of any better solution than doing all this yourself with javascriptand in-site controls. Then you will have control and the user will still have choices.
Getting a site to work with ems etc seems like a pipedream to me but I would loove if someone could prove me wrong. I will check out your site when it’s done Ben.
please god don’t start another 10px trend!
I would like to reiterate what Callum said above: using 62.5% is not a foolproof way to get 10px, as users can change the default type size. If the precise size is that important to you, do what Mark does and set the size in pixels. No resizing in IE is the price you will have to pay for that precision.
Note to Mark: Great site, great advice on typography, terrible error handling in the comment form. I forgot to put my email address in the form and got an error, and when it dumped me back here my comment (which was originally more in-depth) was gone. I won’t make the same mistake again, but for the sake of other users, you might want to have the form repost the existing content on errors.
Charles, you misunderstood our discussion I think. We want our sites to look good and use smart measurements that relate to eachother. We all design for one specific “size” but at the same time we also want users to be able to change it through the browser if they have high resolution, poor eyesight or whatever.
Currently, IE for pc don’t allow users to change typesize if pixels are involved.
Johan has said what I wanted to say, again — the user can always change the default browser text setting whichever way you use text sizing, (and *should* be able to), but using em’s and a percentage is the best way of maintaining the ratio of sizes that Mark discusses in this article.
I *want* users to be able to resize text, and even use larger than 16px as a base if they need to, because it makes a site more accessible to them. What i also want is a way of securing the relationship between fonts, and that is what the percentage method allows you to do most easily.
As for using javascriptetc, why should you when every browser features built in controls that a user will be more familiar?
Mark,
This is great stuff for those web designers who, like me, come from the computing end of the scale. I have no graphic design/typography background whatsoever, and have had to pick things up along the way. It is great to have some basic concepts set out so clearly. I’ll be referring back to these article, I know.
Regards,
Peter
Ben, that is why sites use in-site javascriptfunctions. Alot of users don’t even know that they can change the textsize. It’s dangerous to presume that. Especially for IE users. Since those controls are pretty much useless for most sites…
But I think this is a contemporary solution though. I think sites use these javascriptfunctions just because most of the users use IE.
It’s just a workaround at this point of time.
Hopefully they will be able to change text-size set in pixels in ie7.
Sorry to pimp my site on yours Mark, and feel free to delete this if you feel it is out of place, but I have just uploaded my new layout which uses ems, if you are at all interested…
beseku.com
Veery cool Ben!
You should totally writean article about this on alistapart.com or something. I love how the whole site scales. Beautiful.
Peter — Thanks, I’m glad you’re finding the site useful. Plenty more where this came from — keep tuned.
Ben — Nice. I’ve been thinking about tackling something similar for quite a long time now. What’s great with your new site Ben is there is a clear relationship between the typography and the grid. This is crucial to good grid design. The relationship is then retained when the user resizes the text. Excellent stuff. My only concern is when the text is enlarged a lot, the grid enlarges rather than evolves to cope. It would be interesting to see the grid change shape, become more modular or whatever, to cope with the larger text whilst still retaining the typographic links.,
Something I’m thinking about trying when I eventually get some free time!
Johan: actually, I understood your discussion perfectly. I do, in fact, agree with you, and the way you suggested is the way I code my own site. The only point I was trying to make is that you can’t say 62.5% = 10pt.
Basically, you have two options: 1) You can design around a base size and give users the ability to change the font size, with the drawback (if you can call it a drawback) that you can’t control what that base size is, or 2) fix your base size with pixels and take control away from the users.
Again, I don’t disagree with you, I just wanted to point out that you can’t have it both ways (i.e., a default fixed base size with user control), at least not yet.
According to your classical scale there is no 13px size. Yet, you use 13px in your example (h4 element). So by your own definition you are playing offkey.
Did I miss something?
No Jeff, you didn’t miss a thing and thanks for pointing that out.
I’ve been using font-size keywords for a little while now with reasonable success. I set the body font-size to small (with a hack for IE5x/Win setting it to x-small) and then all other sizes are based on that, using percentages. I avoid pixels because of the IE resizing issue.
I’m loving this series of articles. Typography and the grid is something I’m drawn to at the moment and thinking about how these principles can work in a medium as fluid as the Web is fascinating. I must get hold of a copy of Design In-Flight to read your article!
Mark: I never could figure out why more people don’t take advantage of using a percentage to declare font size in the body tag and EMs thereafter. I first discovered this approach, which includes thorough testing, on The Noodle Incident: Sane CSS Sizes.
Okay, I’ve got to call you on this, or rather ask for a point of clarification. Previously, you said that all punctuation (bullets) should be hung so that the body text flows left-aligned and uninterrupted. Yet I see that even within these articles, your bullets are indented.
I’m wondering, was that advice just for when setting type for print, or is it applicable on the web as well? Also, are not people more used to seeing bullets indented because of common programs like MS Word? I’m not trying to question the validity of what you’ve said, only asking for advice.
Nathan — Thanks for reminding me about this. This site, and the CSS for the lists, was developed before Christmas, quite a while before I deemed hanging punctuation quite so important. This has now been changed and the bullets on the site hang as they should!
(Sorry for the off-topic post… feel free to edit/move/delete this, Mark.)
The response from many non-designers to hanging bullets is “that looks messed up.” Obviously this is a technique that will be recognized and appreciated by designers, but its effect on clarity and understanding from a reader’s point of view are debatable. I worry in particular that readers will pause to consider what they perceive as a malformed layout (or at least something outside the norm of their experience).
In my opinion, any design element that distracts from the content (while not providing any additional clarity or meaning) is to be avoided.
But I wonder: Are hanging bullets one of those things? I’d be interested to hear from some non-designers.
It’s a really valid point John. To many people, including designers, they will look at them and think ‘something’s up there, my browser’s screwed up, or the designer has’.
I guess it does come down to personal preference and perhaps a way a designer can express themselves a little differently.
To be honest, I’m not that sure about hanging bullets. In my mind, they don’t distract from the content and actually pull the bullets into the content, rather than making them look very seperate. So, in this context, bullets treated in this way can certainly look more sophisticated. But, as some readers have pointed out, bullets in extended lists or when they aren’t embedded in content do tend to look a little odd if hung. Is this because we’re used to the way software handles them?
I’m a great believer in content being part of design. The design should enhance the content, not the other way around. Just because we can hang bullets in software now, should we?
Pre-CSS days, I used to just sort of put up with bullets the way they were. Not that I wanted them hanging to much as I usually didn’t like them indented quite as much as the typical 40px default for most browsers.
I have to admit though, while the hanging bullets look a bit “off” at first, I think it’s for the better. To me, it shows that the designer took the time to make that change.
By the way, I put a link to your article from my site. I don’t get a whole lot of traffic, but I felt it was worth noting.
I’m sure everyone else here has already read this, but just in case — the noodle incident (http://thenoodleincident.com/)has a very usefull article on this various subject. It dicusses several different size-specification methods in depth, and provides screenshots of different browser’s reactions to each technique.
http://thenoodleincident.com/tutorials/box_lesson/font/index.html
Hey Mark—Thanks for the response. The only way to “know” how people respond to hanging bullets (or any design convention) is by watching and testing. And even if people notice something, it might not have any kind of negative effect on their experience with the piece in question.
“Just because we can hang bullets in software now, should we?”
Probably. The only way to get hanging bullets into the norm is by doing it. And since we’re designers, we have the power to make that change. (Exciting, huh?)
I am really, really, confused by this tutorial.
I know I’m arriving late at this party, but I want to throw in a resounding NAY vote against the percentage-of-default hack that so many people are advocating. The “beseku.com” example cited above as a case study for this approach displays as 9.6-point type, way too small to be practical.
Jeremy — What’s the problem? Can I help?
Jeff — I’ve just been reading an article at Pixel Meadow about this kind of thing. It seems very in depth on defining a consistant style and then using em’s to do the scaling. Have a look and share your thoughts if you will… thanks
I am not at all impressed with the way the author and commenters are abusing the apostrophe to indicate plurality. Please, typography is meaningless if the text being rendered is garbage.
Would you like to elaborate on that K Smith?
Sorry to come late to the party. :-)
Thanks for the articles, Mark; a little thought about typography goes along way IMHO. I would just like to contribute one thought here, to everyone advocating weird and wonderful ways of fixing type size on the web: PLEASE STOP! (Yes, I’m shouting. It’s that important.)
Unless your site has some strange requirements, body text should always be set at “normal” or “100%” size. Most browsers allow the user to set the pixel size this generates explicitly now, and they will presumably have set it to a value with which they are comfortable.
The first thing I had to do when reading Mark’s articles is hit Ctrl-+ a couple of times in Firefox to force the text to grow until it was comfortably readable on my monitor. Visitors who have poor vision, whether through old age, partial sight or whatever, will thank you for not second-guessing them and setting your body text at some small fraction of their preference.
Once you’ve done that, it goes without saying that all other text should be sized relative to the body, not in absolute terms, as well. This way your site’s logical structure will be preserved regardless of any scaling of text, which is as it should be. Combined with a sensible fluid layout (which we do all use in web design, right? :-)) this will cater to the widest possible audience with ease.
I believe he’s referring to “em’s”. Much like “CD’s” or “DJ’s”, “em’s” is a common misuse of the plural apostrophe.
For what it’s worth, I personally wouldn’t have bothered commenting on it, but I hope that clears things up somewhat.
Can you really safely make that assumption?
Not completely safely, no, but it’s hard to go wrong with a 100% default. On the other hand, it’s hard to be right by setting the sort of reduced font sizes mentioned by various posters above.
For users who haven’t changed the default font size, most recent browsers will render “small” or “62.5%” text too small for many people to read. Worse, since the world’s most popular browser hasn’t caught up with the ‘90s and provided open-ended font scaling yet, rendering your text in such a small default size can prevent visually impaired users from reading it even if they scale the font up as much as possible. (This could be true of text set at normal/100% by default as well, of course, but it’s likely that any users who can’t read that at full scale will have customised their browser.)
Of course, for those users who have selected a default font size according to their preference, overriding this goes against their explicit wishes, and will probably make your site look bad on their screen.
It seems to me that a normal/100% default is a win/can’t lose proposition, while a smaller size is a lose/can’t win one.
With many years experience of setting and styling award winning press advertising I have never seen hanging bullets as you recommend, and also feel that the destroy the visual line. More common is to indent the bullet to the right of the left hand edge and then to further indent the copy attached to that bullet. Also slightly dismayed that you did not mention the use of hanging punctuation with fully justified (i.e. straight edge left and right)copy — which requires all punctuation at the end of a line to be hung out to the right. It is critical of course to ensure that the amount by which a character is hung is done not simply using measurement but also incorporates a visual alignment.
Good site though — thank you.
[…] Five simple steps to better typography — Part 4 Excellent insight to using a correct typographic scale. […]
[…] Five simple steps to better typography — Part 4 Excellent insight to using a correct typographic scale. […]
[…] further reading on hierarchy I would highly recommend checking out Part 4 and Part 5 of Mark Boulton’s fantastic Five Simple Steps to Typography […]
[…] combines and expands on the final two parts 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 […]
[…] At first I tried to find proper visual hierarchy for the different typographic elements I’m using in my posts. By setting adequate visual hierarchy one can structure a document and set indicators which point to important elements. Because I didn’t want to use color yet I started with font-size. For the size of the different typographic elements on this blog I used the scale mentioned in this article. […]
[…] given them more visual weight than the standard, internal links. I’ve used a variation of the classic typographical scale to create an obvious visual hierarchy. The headline of the user’s desired article has the […]
[…] the classic principles of typography. For this site, I’ve used font-sizes based on the classic scale to create an obvious visual hierarchy, which helps to direct the user’s scanning flow. The […]