April 13th, 2005
Five simple steps to better typography
Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography. Call me a little bit purist but this bothers me.
So, in an attempt to spread the word here’s the first of five simple steps to better typography. To kick it off, part one is about the Measure.
Measure the Measure.
The Measure is the name given to the width of a body of type. There are several units of measurement used for defining the Measure’s width. The three basic units are:
- One point = 1/72 of an inch
- One pica = 12 points
- One em = The distance horizontally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for correcting me on this.)
But, with the advent of DTP packages and the website design the following are also now used:
- Millimetres
- Pixels
There is an optimum width for a Measure and that is defined by the amount of characters are in the line. A general good rule of thumb is 2–3 alphabets in length, or 52–78 characters (including spaces). This is for legibility purposes. Keep your Measure within these guidelines and you should have no problem with legibility. Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb.
CSS and fluid?
What is interesting here is fluid designs on the web. How can a Measure react to an increase and decrease in size. The entire grid would have to adapt to that change. An interesting discussion point and challenge.
The Measure and leading.
A simple rule is your leading should be wider than your word spacing. This is because when the balance is correct, your eye will move along the line instead of down the lines.
If your measure is wider than the guidelines for optimum legibility then increase the leading, or line-height as it’s sometimes wrongly called. This will have the effect of increasing legibility. Your leading should increase proportionally to your Measure. Small Measure, less leading. Wide Measure, more leading. It’s a simple but effective rule.
Reversing out?
When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.
Tracking
The general rule of thumb in tracking your words (not the characters) is that the shorter the line length the tighter the tracking, the opposite is also true.
Your responsibility
Following these simple rules will ensure your bodies of text will be as legible as they can be. These rules come from a typographic craft background which unfortunately, for our industry in particular, aren’t being taught as much as they should be in the art schools around the world. As a result they aren’t being practiced and correct, well-considered typography is taking a nose-dive.
It’s our responsibility, as designers, to embrace the rules which are born of a craft which goes back hundreds of years.
Hopefully, this series of quick, sure-fire ways of improving your typographic craft will help in some way make sure computers and DTP doesn’t kill it off. That would be a great shame.
The series
This is the first installment of this “Simple Steps…” series. Next up we have Hanging punctuation
- Measure the measure
- Hanging punctuation
- Ligatures
- Typographic Hierarchy — size
- Typographic Hierarchy — weight
Great article — One of the most interesting things I have read recently, and by far the most useful.
Now I’ll have to think about altering all those old projects to conform…
Nice article Mark, hope you also cover the nasty americanisms that have come started to invade British publications? the dreaded dog teeth quotation mark is one of our company’s pet hates. Anyone who uses it should be hung, drawn and quartered, ‘ not “. Grrrrrrr.
A good book to read if you get a chance is Copy-Editing The Cambridge Handbook for Authors and Publishers by Judith Butcher.
http://www.amazon.co.uk/exec/obidos/ASIN/0521400740
Good advice. I’ve heard 7–10 words per line is a good rule of thumb, it probably works out the same as your 2–3 alphabets, though your guideline is easier to implement.
Looking forward to the rest in the series.
You should also check out the Thinking With Type website and Robert Bringhursts “Elements of Typographic Style.” Very good resources both, though the Bringhurst is the go to guide for typesetting.
Mark,
An interesting read — I’ve always struggled to understand what to do in order to make text more legible, hopefully these articles will give me more of an insight. Look forward to reading the next one!
Thanks Mark. Another invaluable article. I’ve always wondered why line-height was used in CSS rather than leading. As somebody who comes from a newspaper publishing background (Quark Xpress et al) I got used to leading and kerning. Now it’s all line-height and letter-spacing. I guess these labels are a little more self descriptive than leading and kerning which i guess relate to the old skool print press process, rather than the web. Cant wait for your next installment.
For beginners, I’d recommend “The Non-Designer’s Type Book” by Robin Williams; it’s a good guide to typographically-correct punctuation and such, as well as layout and readability, etc.
Chris — “Elements of Typographic style” is a must, it’s such a great book. Another favourite of mine, for no nonsense typography is “Stop Stealing Sheep & find out how type works” by Erik Spiekermann. Superb introduction to typographic design.
Thanks for this, one for the bookmarks!
I’m a programmer trying to dive into the minds of designers…
Very interesting, our guys would just “huh” to these advice ;-)
An em *is not* the size of a capital M. It is a square of the point size.
Thanks Joe, you are of course correct and i’ve updated the article. I think that spans from my lecturers in college saying that a caps M is pretty much the widest base character, and as such is a rouch approximation to an Em. Funny how you can be misled all these years. Interesting to note that ‘Em’ is a horizontal measurement only. How many times have you seen em’s as a vertical measurement?
An em is just a unit, like a pica or point, but relative to the text instead of absolutely defined. There’s no reason an em can’t describe a vertical measurement. In web design, for example, ems are used to define the sizes of things that must scale with the size of the text.
Where did all this 1 Em = the width of 1 letter ‘M’ come from? It’s not the first time I’ve heard this. Is it a rough approximation?
How do points relate to screen? Whilst I can understand the points system on paper, I just don’t get how it translates across to screen. But I do get how if text is 12px (wide), 1Em = 12px. Didn’t there used to be a measurement like 1Ex or something like that? What was that all about?
One other confusing thing about pixels is that if a font size is 12 pixels, one could assume that each letter fits within a box 12 pixels wide by 12 pixels high. Do font creators aim to make maximum use of a box and if so, how?
Brian — You’re right an em is just a unit and it is relational. You’re also right in saying that there’s no reason why it can’t be used for vertical measurement, it’s just traditionally points and picas (specifically picas) were used as measures of vertical distance.
Of course with the advent of CSS the Em was perfect for creating relationships, between type size and leading for example, which need to be retained when the type was resized.
This is a great example of typography evolving to suit different media.
Guy — I’m not sure where it came from. One of my typography lecturers at uni told me it’s an easy way of estimating the size and remembering the approximate size (I guess because ‘Em’ sounds like ‘M’. I can see the logic, if not entirely accurate.
Text size: I’m going to be writing about this is one of the installments of this series. It all gets a bit complicated for on screen use because of the differences in pixel resolutions on monitors. There is a measurement of Ex in CSS which relates to the x-height of a character, at least it’s supposed to, in reality it’s half an em. The x-height isn’t embedded information in most fonts, so the browser just interprates it this way. Interestingly this is one thing that IE5 on a Mac does well, it internally renders a lower case x, of the font you are using, and then counts the number of pixels.
“Didn?t there used to be a measurement like 1Ex or something like that? What was that all about?”
I read that Ex is a relative measure corresponding to the height of a lowercase x character (but not yet accurately calculated by browsers so it doesnt get used much in web dev).
Mark- Super interesting conversation. I’ve had no formal training in typography, but I love to learn. This has been a very informative post. One thing not clear to me is that a ?W? in most cases, is the widest character not an ?M?. Why would they use ?M??
Guy- I hear you on the pixel units to describe a type. 12px doesn’t equal 12 square px. I have noticed most fonts tend to be 2 to 3 pix less in height than described. (e.g. a 12px font size will most likely be 9px in actual height and the width will vary character to character.)
This is fascinating.
The letter ‘i’, for instance, with the font size of 11px might be 11px heigh but only 3px wide yet the letter ‘m’ might be 11 pixels high but 7 pixels wide. How does somebody who creates a font get to grips with the intended kerning for their font? I’d love to hear more about font creation if anybody has done such a thing?
I’d also love to hear more on how browsers / Operating Systems work out font sizes, specifically in relation to pixels and percentages. It’s a very confusing topic that isnt covered much in detail elsewhere.
cbit — The unit ‘Ex’ is derived from the typographic measurement or the character x-height which is, your correct, the height of a lower case x. Like you say this isn’t rendered correctly in most browsers, which tend to use 50% of 1em as 1ex.
Thad — I’ve no idea where this came from, thing is it’s stuck in my mind, which is good on one level but bad on another as it’s actually incorrect!
Guy — Typographers and type designers drive themselves insane by kerning. It’s another thing i’m going to touch on in this series but kerning not only involves space around individual letters, like ‘i’ and ‘m’, but letter in pairs such as ‘T’ and ‘a’. And that’s just in English! When you consider other letter combinations, which may cause kerning issues, in other languages… phew, you can see how some typefaces take literally years of continual development.
In relation to computers rendering, essentially a measurement relating to inches, in pixels is a pretty confusing, and complicated, topic. I’ll do some more digging into this…
Thanks Mark. I’ll keep my eyes on this.
How do points and pixels map? Not very well. A lot of software assumes that screens are 72 dpi. So 1 pixel = 1/72” = 1/12 pica = 1 point. Some use the information in the monitor profile. I’ve also seen software that actually asks you to stick a ruler up to the screen to calibrate it. (Which on a CRT is probably the only way to get it right, since the size of the borders is adjustable.)
I don’t see much value there is in using points on the web, anyway. Giving some of the measurements in physical units and some in pixels seems like it’d be a way to make your page render weirdly on different-resolution screens, even if the DPI logic were more consistent. (Here I’m using “resolution” to mean the actual DPI, not pixel count. The terminology is stupid; there should be two separate words.)
Also, pixels aren’t necessarily square. It’s common to run 4:3 screens in 1280x1024…which isn’t 4:3. (Maybe that’s related to Thad’s observation that most fonts aren’t square? I’m not sure.)
it is very good and for up comming designer who doesn’t know head tail of the design ‚typography they are saying themself they are expert in design nowadays they think if they know software tolls is they r disigner .….and this site is very good to know about certain issue ..
shahshi
Excellent article Mark. I definitely learned something from this. The problem with web design is that almost anyone can learn to do it without having any sort of design education, thus missing out on base principles such as these.
Thanks!
Scott — Thanks for the info. I don’t really see the point of using points on the web either for those very reasons.
Patrick — Thanks! I echo your sentiments about ‘web design’ (I personally hate that term!). A lot of university, or college courses which are aimed at multimedia or web tend to be either ‘multimedia is art’ kind of thing, or very technically focussed — neither of which teach design. It really is a sad state of affairs.
Adjacent to the Comments header, it says “Post you [sic] own comment.” Is it supposed to say that?
Good article. One picky point: if you’re using reverse type to design for *print*, you’re asking for trouble if you reduce the weight too much (descenders and other letter elements may become too narrow to print well).
Is there any documentation that CSS ex := 0.5em?
By the way, CSS assumes a 96-dpi screen.
http://www.w3.org/TR/CSS21/syndata.html#length-units
Oh the subject of pixels and thier shape, pixels when designing in CSS or Photoshop are square while video pixles are rectangle. :)
Mason — Nope. Thanks for pointing that out.
Jason — You’re absolutely right. Going too light will fill in, that is of course dependent on typeface, printing process and stock.
Joe — I was going on what Eric Meyer states in the 2nd edition of the O’Reilly CSS book, p85 3rd paragraph.
EM, EN and EX. I’d never heard of EX before the comments in this article. But, as others, I’d always been told that EM was width of Capital letter M, it was never intended to be as wide as the widest character (someone pointed out “W”). I was also told that half of an EM was an EN, which would only “make sense” if the capital N were half as wide as the capital M. Could it be that some groups call it an EN, and others call it an EX?
So, we have EM space, EM dash, EN space, EN dash, then, we add to that Thin Space and Thin dash. If memory serves, the “Thin” is the width of common puctuation, like period, colon, exclamation point (bang), etc.
Graham, it’s America’s way of paying you back for the Spice Girls.
Excellent article on a topic that sometimes doesn’t receive the attention it deserves.
The typographer’s ‘em square’ was a square, blank type where each side was the width of a capital M in that font. In CSS, the definition is that it is equal to the font size, however that is specified. An ‘em’ is sometimes referred to as a ‘quad width’ by typographers.
The ‘ex’ unit is the font’s x-height, which is the average height above the basline of a lowercase letter. Browsers usually define 1ex as 0.5em, so it is independent of the font. Note that the x-height is defined even if the font doesn’t contain a glyph for the lowercase ‘x’.
For an example of how a flexible CSS layout can scale the “measure,” or width of the column as type size increases, check out this article on Elastic designs…
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
I found this article interesting and useful in a number of respects.
But as a music grad, literature grad, and design grad, I have to
fundamentally and respectfully disagree. The logic smacks a tad of the grammarian or fundamentalist’s standpoint. I would encourage a less rigid approach. I believe what we are discussing here is evolution in the art.
Implementing conflicted font types and sizes which may not be related
to the traditional scale can be exceedingly effective. Just as the
greatest composers used dischord to evoke emotion or to strike
brilliant contrast.
There are a great many scales in music as well, and they are not all
equally pleasent, however, they are all equally viable options to the
designer (as it were).
Words that were once long-ago slang have been seamlessly incorporated
into our language; Words that incited riots or curled the hair of the right and proper are now used caually in our everyday language to marvelous effect.
The eye, like the ear will see order in what might have at one time been considered chaos.
I see the scale as a guideline only.
You make some good points with which I can (conditionally) agree. I personally would maintain that design and art cannot be truly separated because one is the necessary extension of the other. The foremost factor is that both concern themselves with communication. Design is simply more secular than art. This virtue does require that we know the rules so we can use them to our advantage. I don’t, however, think it is important to know them first. Let me illuminate on that a bit though…
I recall my art instructors (more so than my Design instructors) being crucially critical of classmates who had a na?ve style. These individuals produced some of my favorite stuff. It was often soulful and emotive and hilarious too. While I implicitly understood the instructors’ concerns for a properly structured approach, I honestly lamented the loss of innocence that followed. I felt something was being lost that was worth keeping. Does that make sense?
Hey, I cringe at bad design as much as the next designer, don’t get me wrong! This includes bad font usage and bad art in general. But some part of me loves it too because it deserves to exist; to provide contrast and comparison, to push the envelope and to encourage growth. I see it as part of the primordial ooze I suppose.
Please accept my words as constructive. I mean no offense. Nice site. I am still trying to develop my CSS skills. I find coding annoying. I have an over developed right brain and an underdeveloped left brain. The abstract nature of coding is in direct opposition to my nature. lol!
Peace,
JayDub
Winnipeg, Manitoba, Canada
Great article! Thanks for the information. I’ve never known typography can be so complicated.
Great series. I have to point out something that really gets on my nerves. It’s not typography as such, but grammar. Never start a sentence with ?But?.
?But, with the advent of DTP packages and the website design the following are also now used:?
Could be:
?With the advent of DTP packages and the website design the following are also used:?
Hey, pedantry is a survival skill.
Hey great writeup! Found the link on an austrailian forum. Posted the link on Kirupa and everyone loves it! Any chance u can make a pdf version?
Jesse — Thanks for dropping by. The pdf version for this entire series is currently in the works, I’m just toying with content at the moment and there are plans to extend the content, include crib sheets and things and possible charge a small fee for it (say two dollars). That way you get all the information in this series, plus extra stuff all nicely designed for you to print out.
Keep checking back for the release date…
I haven’t seen anyone mention the EL space. For those of us crossword freaks, there are three traditional character spacings: EL (for letters like ‘l’, ‘i’, and ‘t’); EN (for the bulk of letters that are nominal width); and EM (for ‘m’ and ‘w’). However, I’d always used the ratios of 0.5, 1, and 1.5 to calculate the width of type, so an EN would not be half an EM.
Mark–“There is an optimum width for a Measure and that is defined by the amount of characters are (sic) in the line.” …up in your Measure explanation.
I was linked to this site from a friend’s web log. This is some great stuff, as I am a writer and am never satisfied in how my works looks typographically on the web. There’s a small grammatical error I found to correct ( I know, I’m one of those stuffy English types). It’s in the sentence in the first section:
“Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb.”
Either change ‘generally’ to ‘general’ or say ‘seems to work well generally as a rule of thumb.’
Much thanks; keep up the good work and keep the craft alive!
Many times I read about the size of a line. This often results in a web page filling just about 1/3 of my web browser in width. Also this page is only filling a small part; lukily especialy on this page I can switch off the style and the text is floating the whole width.
I find it mostely very strebuous to read such pages. Ist much easier if my eyes havn’t to switch to new lines such often.
What I whant to say is that is depends hardly on the reader what is better to read and what not. If I like it to read the text more smaller I can scale the windowof the browser. Unfortunality this does not work for the other way.
The biggest sin of new typographics is to teach the web designer that this line width is also guilty on web browsers. I absolutely agree that on paper this might be true but not on web pages where the user should be free to fit the windowto his reading preferences.
??? ????? ???? ????? ??? ??????
??? ???? ‚??/?? ??? ?????!!
??? ??? ???? ????? ????.
??? ????? ?? ???? ??? ?????.
???????
???? ????? ^^
http://5myjob.com
http://5myjob.com
*????? ??? ??? ???? ????*
??????
“ ???????????????????? (? ?50??7)” ? ???
??? ????? ????? ??? ??? ???????? ????
???? ??? ????????? “????” ? ????
??????? ???? ??? ?????????.
(????: )
??????: 1234
Klaus,
I suggest you go read up on a man named Fibonacci and how the golden section relates to everything that is good, balanced and beautiful in the world. Unless you’re blind, I can’t imagine wanting to read in a straight line forever scrolling to the right, though in braille that might be alright.
[…] Mark Boulton Old but quality article serial. […]
[…] and applying punctuation correctly. Often these topics make for very dry reading in a text book or online, so why not enrol in our InDesign Essentials Skills course to get the basics of typography? These […]
[…] + 5 simple steps to better typography […]
[…] and applying punctuation correctly. Often these topics make for very dry reading in a text book or online, so why not enrol in our InDesign Essentials Skills course to get the basics of typography? These […]
[…] Five simple steps to better typography – Este é um post precioso: o essencial do que precisamos saber para tornar o blogue mais legível através da tipografia que escolhemos está aqui explicado: medidas, cores, espaçamentos, tem tudo. Obrigatório consultar. […]
[…] read Mark Boulton’s “Five simple steps to better typography.” This is the first of a series of five articles; links to the other four are listed at the […]
[…] Similar and worthwhile: Mark Boulton’s Five simple steps to better typography. […]
[…] so I have been reading a little on typography to get better idea of how to space and size text. Heres five steps to better typography. These aren’t set in stone, good starting points, after watching a CSS tutorial a while ago. […]
[…] text on dark backgrounds, which stinks because I like the current color scheme. They linked to Five simple steps to better typography., which basically told me my measure is too large and my leading/line-height should be increased. I […]
[…] in the name of simplicity, here is a good tip, taken from Mark Boulton’s fantastic series Five Simple Steps to Better Typography. “A general good rule of thumb is 2–3 alphabets in length, or 52–78 characters (including […]
[…] Five simple steps to better typography […]
[…] five-simple-steps-to-better-typography – This is the first of a series of tutorials that provide in-depth coverage of the fundamentals of good typography with a focus on how it is applied to the Web. Reading all five will give you a solid understanding of the craft and the foundation to start creating on your own. […]
[…] http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] fördjupande artikelserie om typografi från Mark Boulton, Five Simple Steps to Better Typography, finns också att läsa för den som vill fördjupa […]
[…] An article from 2005 (seems like a really long time ago by web standards) by Mark Boulton on the first of “Five simple steps to better typography”. […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] Five Simple Steps to Better Typography […]
[…] Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic […]
[…] 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. […]
[…] http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography vrij @ 17:23 | April 21, 2010 — Filed under: Typography […]
[…] Door Mark Boulton. Uit 2005, maar nog steeds effectief. Klik hier. […]
[…] Five Simple Steps to Better Typography by Mark Boulton is a five-part series on improving the typography in your designs. It covers typographic measure, hanging punctuation, ligatures, and typographic hierarchy. […]
[…] Five Simple Steps to Better Typography by Mark Boulton is a five-part series on improving the typography in your designs. It covers typographic measure, hanging punctuation, ligatures, and typographic hierarchy. […]
[…] Five Simple Steps to Better Typography by Mark Boulton is a five-part series on improving the typography in your designs. It covers typographic measure, hanging punctuation, ligatures, and typographic hierarchy. […]
[…] is are some Simple Steps that can make a large impact in the effectiveness and appearance of your designs, in addition to […]
[…] Mark Boulton, Five Simple Steps to Better Typography […]
[…] Five Simple Steps to Better Typography This series of posts from Mark Boulton covers the basics of better typography, covering Measure, hanging punctuation, ligatures, size and weight. It’s a very thorough guide to improving your typography designs, all laid out in a simple to understand format. […]
[…] Five Simple Steps to Better Typography This series of posts from Mark Boulton covers the basics of better typography, covering Measure, hanging punctuation, ligatures, size and weight. It’s a very thorough guide to improving your typography designs, all laid out in a simple to understand format. […]
[…] Correct leading, word and letter spacing, active white space, and dosed use of color help readability. Some useful notes on typography http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography […]
[…] a block of tired text into something that is visually interesting. Mark Boulton has a brilliant 5 part article on the principles of typography that is definitely worth a read. The design Cubicle gives an […]
[…] Five Simple Steps to Better Typography This series of posts from Mark Boulton covers the basics of better typography, covering Measure, hanging punctuation, ligatures, size and weight. It’s a very thorough guide to improving your typography designs, all laid out in a simple to understand format. […]
[…] Commentary. Post Typography : News Web(fonts) Google Font Directory Typekit Howto’s/Tuts/Tips Five simple steps to better typography | Mark Boulton British Letterpress Alessandro Segalini — Handouts Typography for Lawyers Inspiratie The Offices […]
[…] 2. Five Simple Steps to Better Typography […]
[…] Five simple steps to better typography […]
[…] 2. Five Simple Steps to Better Typography […]