I’m really pleased to finally announce the release of a brand new website, The Elements of Typographic Style Applied to the Web, or Web Typography for short.
It could be said that in the print world, the role of the typographer is diminishing. On the web, typographers don’t even get a look in. For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy, and it’s the neglect of body text that I’m really trying to address. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
Web Typography is a work in progress by design. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time. There are currently five principles written up and I hope to add one a week. You can subscribe to an RSS feed for notification of new additions.
Web Typography is one of those projects that has laid dormant for months, awaiting the final polish before release. The final polish never arrived – instead I decided to get it out there and add things like search and an index when I can get around to them. If you come across any glitches or have any suggestions please add a comment to this post.
I’d also love to know what you think of the design. It tried to base it on the book and let typography be the design. As such the navigation is ‘unconventional’ as someone kindly said – I think it works though. No doubt the liquid design will get some people’s goat, in which case you might like to read 2.1.2 Choose a comfortable measure. I am also concerned the text may be a bit too small – what do you think?
I should also add that Robert Bringhurst has nothing to do with the site. I wrote to his publishers nearly a year ago to explain my intentions and ask permission to use the extracts, but I got no reply. I think it amounts to ‘fair use’ anyway, but I thought it polite to ask.
Comments
1
Very interesting project. I love the book, even though, after one and a half year, I still haven’t finished going through it completely. I hope you won’t get into trouble with the publisher, because the principals Robert explains in his book are very valuable to any designer.
2
Woo hoo! Amazing work, Richard. I was just wondering about you finishing this the other day.
3
Lovely project!
Just to let you know, though: on my screen (IE6 on pc with XP) the thin space between initials renders as a little square (with boundaries).
Never encountered that before – does that mean that nobody ever uses a “ ”? Cheers,
j.
(In the preview it shows up as a square, too).
4
Awesome!
I first heard of this book from JSM (On the Subject of Design), and I refer to this list whenever I have some extra money to spend. I think I’ll get it.
5
Yes, the text is too small. From my parsing of the CSS, it’s at 75% of my preferred deafult size, or 12px on real browsers. It actually hurts my eyes to read the small, fussy font (WinXP, Firefox) — which isn’t a good start for a web typography site.
Section 2.1.5 shows the shortcomings of using Unicode characters that are not HTML entities: the spaces as viewed here are as big as if you were using  . I vote for no space.
6
lovely stuff.
7
Goodness me, but this rocks; I’m so glad you finally got this up and running, Richard. Congratulations, and thanks!
8
Thanks for this, I look forward to reading it.
There are some strange things happening with the list of contents on windows XP. Looks a little like the peekaboo bug (I think). The numbers are off to the left of the view port and the links jump when you hover.
Let me know if you want screen grabs (maybe its just my computer.)
9
Matt – it’s not your computer, it’s your choice of browser :-) Yes there do seem to be a few layout issues in Internet Explorer – something I just didn’t have the time and energy to fix. Hopefully I’ll get around to it soon.
Proposed fixes from anyone are most welcome :-)
10
Looks good (although I agree type is perhaps a little on the small side) and full of interesting stuff too – I look forward to seeing how it develops. Well done and thanks for putting this out there.
However, I hate to say it, but I have spotted a typo. In section 2.1.3 Set ragged if ragged setting suits the text and page paragraph 3, typrwriters should of course be typewriters.
11
Looks great, Richard. Looking forward to seeing the site expand.
Thanks!
12
Ah, finally – I’ve had that site bookmarked for months!
;-)
Lovely. I always have Bringhurst’s book by my side at the computer totally invaluable.
13
This looks really useful, thanks. There’s something a bit weird going on with the RSS feed in Bloglines – not sure if this is down to BL or the feed, but the permalinks are under the domain webtype.clearleft.com. Also, there are more items showing in the BL feed than are in the XML file itself!
14
Brilliant. This is something I’ve been meaning to do for some time, now. I use Bringhurst for my graphic design classes, and try to incorporate the same into my web design classes. And you are just in time for the Spring semester.
15
Paul – Bloglines seems to have got itself an RSS feed from my development server. I’ll see if I can permanently redirect it to the right place. Thanks for letting me know.
And as I thought there seems to be some feeling that the text is too small so I will look into bumping the size up a bit.
16
If you find the type too small, have you considered learning how to increase it yourself? Hint: Try Ctrl- or Command-+.
17
Very nice resource.
Also worth noting that a measure of 50 -70 characters is a good recomendation for print where people read shorter measures more easily, but less significant for the web where people seem able to read larger measures comfortably. Which is good news for liquid layouts.
http://blog.fawny.org/2005/09/21/measures/
18
On the page for rule 2.1.3, in the second paragraph under “Future Consideration,” there is an unneeded line break (<br /> tag) after “No expansion”, interfering with the line flow in all but the most fortuitous of window and text sizes.
19
A beautiful and much needed site. Congratulations.
20
Richard, what a brilliant idea and very much appreciated.
21
Excellent stuff, a really useful CSS reference. Looking forward to future installments, cheers…
22
A worthy effort. Keep it coming!
23
Thanks for your hard work! It should be an extremely useful resource once it’s complete.
One thing I’ve found that’s a bit annoying is having to click back to the Table of Contents every time I get to the end of a sub-section. May I suggest adding “Next” and “Previous” links at the bottom of the text, plus links to the sub-section underneath the Section title on the right side?
Thanks again!
24
What a great resource and you’ve imbued it with the beauty of Bringhurst’s book into the bargain. Excellent.
25
Great project, hopefully it’s successful.
“I am also concerned the text may be a bit too small what do you think?”
Seems fine, except for the “The Elements of Typographic Style Applied to the Web” page header (I’m not using Flash). – I also recommend to remove the “splash screen” (or, for better usability, at least directly link the headline to the table of contents).
PS.
And please, what is the problem when the comment form displays “We have a problem…”!?
26
I like it a lot – I’ve been working through Bringhurst’s original, and it’s exciting to see this version.
Although each section is generally quite short, it’d be nice if there were a link to the next page at the bottom, as well as the top.
I look forward to new chapters!
27
This is a great resource Richard. I’m so glad you’ve created it.
28
Yes, I think the type is too small. Most people sit back from their monitors – viewing distances are farther than for books. I interviewed for an editing job at an office where I saw a writer editing in Word with text displayed huge. I now routinely edit 12-point type displayed with Word’s “text width” setting – so I can lean back and not squint.
I like reading text that’s formatted roughly as in http://www.io.com/gibbonsb/mencken/.. Also, narrow columns, serif font, a little extra leading. Generally, I think Colin Wheildon’s results (Type & Layout) all apply on the Web.
29
Richard,
Great work! I learned several things that I didn’t know before in these first few installments. Also, I like the design and the tone of the site. It fits the subject well…
Thanks for putting it together; I am looking forward to more!
30
This is a very interesting project, one I will surely follow with great attention. If I have some time, I might even think about translating this work in French, with all permissions of course.
Just a quick note here: 5.3.2 Use upright rather than sloped parentheses, square brackets and braces, even if the context is italic. Some minor corrections apply here: http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.1/
Thanks
Patrick
31
In 2.1.4 you say “don’t use non-breaking spaces as they have a special meaning.
While I know practically what this means. You don’t elaborate on when to use them.
In 2.1.5 you use one in lieu of a “normal word space”. Which of the standard spaces listed in 2.1.4 is used for a normal word space? ie, what is the “space” character output by the space bar?
Cheers.
32
Also, I noticed someone mention section “5”. When I view the site I only see section “2”.
33
Fred – I’ll look inot clarifying the spaces page. And as for section 5 – I haven’t written it yet but I think Patrick is pointing out that I’ve broken one of Bringhurst’s guidelines in one of the italic quoted sections.
34
I’d probably increase the font size just a tad. For me, its a little small at 1280×1024.
35
Love the project.
Just a technical note. When running Mac OS 9 with Explorer 5.1, the opening page does not render correctly, so that the title actually covers up the links, and I can’t access the content. I know the platform/browser combo above is dated, but I thought you should know.
36
Very interesting and ambitious project indeed. “The Elements..” was one of the first “real” design books I bought back in the day, along with Brockmann’s grid bible and it still is a cornerstone of my professional bookshelf. Very cool to see someone taking the time and translating it to the context of web typography as well.
The text size is spot on. Altho I have to mention I’m not a great fan of liquid column widths, no matter how many times I read through 2.1.2 ;)
On the other hand, I would’t call the navigation “unconventional” at all. I rather think it’s very suitable in the spirit of the original book. Plus it seems to set the rhythm quite nicely.
Good work, I’ll definitely be back to check how this little project grows.
37
i’m new to the art of web typography, and will surely read your site with great intereset. on thing though, the links provided in your feed don’t work (i’m using bloglines to read it).
38
Great stuff!
39
Well, that is a very interesting project. The book is more than great, no wonder it is know as “the bible of typography”. Though the principles of print typography are quite different of those of web typography. Italic serif fonts are not the best think to read on screen… The website looks fine in firefox but what about internet explorer?? Typography should look perfect no matter the browser or the resolution, after all this is what the book argues about…
40
Great idea, very much needed. Good luck with the site.
41
Ah, so that’s what you’ve been working on. An excellent idea indeed, something most designers could use lessons on.
42
amazing site, i have read the book, which every designer should, and to see the principles applied to the web is something all webdesigners should check out.
..nice to see another Brightonian with an obsession with type!
43
This is wonderful, a great resource for web designers.
I think the project would benefit greatly from the ability to post comment on the individual articles.
44
Hey, this is a great idea. Fair play to you for doing it.
One small suggestion. It’s not entirely clear what is an example and what’s text. I’d suggest changing the ‘example text’ so it’s not typoragphy related, and perhaps set it oout visually somehow.
All the best!
45
Very good work, but you need to test the pages with IE con Windows because the paragraphs moves when you pass the mouse on a link :-(
Ciao
nicola
46
I alwaus have problems choosing fonts and styling the text to look fancy. Maybe you should add something about fonts choice for headers and main text and what are good combinations.
47
Classy project – thanks for sharing you’re knowledge in that pleasant form!
greets t.
48
It could be said that in the print world, the role of the typographer is diminishing.
Not in the world of the illustrator who uses images to accompagny text, the illustrator stands somehow closer to the webdesigner since a webdesigner uses typographic elements in the same extend as an illustrator does = namely direct scanning the interior elements of a page where the images denote the text.
Someone I know did the exams of typography – not easy I can tell you – the whole history of type is from the greek, mediaval times and so on. There are so many glyphs! I believe you should look for textbooks used at academic levels in art schools where one teaches illustration.Of course, webdesign is often associated with graphic design but where it more follows the path of illustration design.
Of course, it needs adapted to the web maybe CSS fails short to do any experiment and is Flash Image Replacement Techniques the only thing that comes close/ and imagery of course;
49
Superb; I’ll be watching it closely as your work will certainly inform my current project, a large collection of graphs, data tables and text concerning the magnetic properties of steels, all to be published in pdf.
So, you may want not to limit yourself to web design, although that discipline can certainly use the insights you’re already offering. I think just about anything meant to be viewed on a computer screen, including applications, interfaces, pdfs and ebooks, even email, can benefit from this.
One note: I’m also getting jumping links when mousing over them, using IE6 and XP.
Best of luck.
50
You, and apparently Robert Bringhurst, don’t bother to do research before you write something. The reason that double spacing was used after major pauses in the rhythm of a continuous-text block (i.e. periods, colons, semi-colons) is not a ‘quaint victorian…” anything! Actually it would take more room than this comment space allows to explain it to you. Frankly, though, you don’t know enough about copyright law or about typography to be working on this ‘project’. You’re an amateur. I’m a Master Typographer, and it has now become patently obvious to me that I will have to, once more, release MY book which is actually a ‘definitive work’ on typography and web design, far more than this guy Bringhurst’s book and certainly far more than what you are attempting. Cause you are following Bringhurst and that is like the ‘blind leading the blind and deaf’. Sheesh. People are too damn lazy to do the proper research! No wonder you are doing this on the net, who’d let you do it for a real publishing house? None of the publishers I write for, that’s fur shure.
51
Master Knob & Typeface Spanner
(man, I love being puerile)
52
For you Mr. Rutter I recommend (friend teaches typography at academic level:
I would recommend this book for beginning graphic design students or for libraries interested in visual arts literacy. -> more understandable
http://www.whatifind.com/aws/About_Face:_Reviving_The_Rules_Of_Typography-2880467985.html
53
OK then “Master Typographer and Typeface Designer”, where do I start.
First off, you seem to have got completely the wrong idea about the site. It is first and foremost a web development resource. The site explains how to achieve typographical treatments using CSS and HTML. I chose to use Bringhurst’s guidelines because it is a well regarded book with a structure suitable for such as website.
Whether you disagree with his guidelines is beside the point. The point is to show how, with a little bit of application, CSS and HTML can be used to add typographical worth to the web.
Am I an amateur typographer? I wouldn’t even go that far – I am, though, a professional web developer and as I said that is what the site is fundamentally about.
And if you really are such a leading light in your field, why on Earth would you hide behind such an arrogant monicker as “Master Typographer and Typeface Designer”. Refusing to give your name, and your website merely offers your comment up for ridicule. Remember there are 1000s of people apart from me who read these comments.
If I am so off the mark please offer your experience and expertise to the web development community. If you really are such a leading light in your profession I’m sure that would be both beneficial and appreciated.
What’s more if you actually are a published author, why did pass up the opportunity to tell this readership about your “definitive work” on typography and web design? An excellent opportunity missed to get your message across to your target audience, I would have said. Instead you choose to mount a vitriolic personal attack on me, which is frankly comes across as childish and unprofessional. No wonder you wanted to stay anonymous.
54
I said: For you Mr. Rutter I recommend (friend teaches typography at academic level:
I would recommend this book for beginning graphic design students or for libraries interested in visual arts literacy. -> more understandable
http://www.whatifind.com/aws/About_Face:_Reviving_The_Rules_Of_Typography-2880467985.html
Mr. Rutter: You did not comment om my remark. It is very important that you should read this book (If yoiu want of course). I am sure you have a practical knowledge of typography as all people that are webdesigners/developers use it in their daily
work. The book you refer to us for ‘advanced typographers’ which means you have to know the basics to understand all of it! The book I recommend is used for art students that study illustration. They know how to draw! But even them start of with the book I recommend!
55
if I might add:
About Face: Reviving the Rules of Typography
Table of Contents:
The computer has made some typographic rules obsolete and others, previously known only to typesetters, forgotten. However, typography remains a fundamental element of graphic design About Face presents and explains the typography basics required by all graphic designers, from the names of the different parts of characters, typeface styles and function, to type measurement, typeface families and type manipulation on the computer. It also looks at typography at work and features a wealth of applied examples by leading designers from around the world.
Designed by internationally renowned Vince Frost, this book is an essential resource for all students of typography and graphic design.
Classification
Function
Standard Fonts
Extended Fonts
Legibility
Readability
Measurement
Manipulating Space
Manipulating Type
Paper and Print
Electronic Writing Systems
Language
Rhetoric
The problem can arise: if you follow you book (which is a good book too) the jargon used might be too heavy for non-graphic designers.
That is why the book I recommend used words that are better suited to teach a novice!
I believe in constructive commenting!
56
It’s a very interesting project and a good work.
Nice to read and spread the words around my blog.
I’d come back to read again. :)
57
A good website about typography by typograph/graphic designers
http://www.typographer.org/index.html
58
Congratulations. I keep The Elements of Typographic Style by my side whenever I do design work, and had been longing to see an adaptation of his principles for the web.
For one, my vote is to maintain the type at its present size. As Joe Clark wrote, users who find it too small can simply increase the size!
It’s great as well to see a demonstration of such recommendations of Bringhurst’s such as bullet points in the gutter and left-aligned numbers beside right-aligned ordered list item text.
Congratulations!
59
This “Master Typographer” clown sounds a lot like “impressive” from your 24ways post (unless there is some kind of underground network of Rich-haters). What ever could you have done to inspire such an enemy? :)
60
Lot of posts here dont say anything: to say something is good, bad is not interesitng? Telling why at length why something is good or bad illustrated with good examples is the way to go.
Bad Examples:
Woo hoo! Amazing work, Richard
Lovely project!
Awesome!
lovely stuff.
Looks great, Richard. Looking forward to seeing the site expand.
Thanks!
Where are the arguments?
61
Congratulations for an excellent idea and implementation.
62
This is way great.
I have a question though. In section
2.1.1 Define the word space to suit the size and natural letterfit of the font
at the bottom you state the box size, set to 1 em, should be the same as the font size in pixels. But we know that this is not the case, that in our browsers fonts are rendered with some whitespace.
Maybe you should mention that in the text.
Can’t wait to read more from this respected professional. Cheers!
63
I really can’t agree with the idea of getting rid of the second space after a full stop: it’s presence makes text so much easier to read. I would have though that this might apply to dyslexics and some cognitive disorders. I haven’t read any studies but I see that Redux reads this so maybe he might be able to comment.
64
” The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.” What ‘high resolution screens were meant? 96 dpi? 100 dpi? 120 dpi? In my blog I argue that only the ‘advent’ of 200 dpi may bring a semblance of a TYPOGRAPHY class in rendering the text on computer screens. Or it better be 250–300 dpi screens. You say, CSS doesn’t know what kerning, hyphenation, justification is, or how they work, or anti-aliasing smears the difference between, say Adobe Garamond and Apple Garamond, then forget about ideals and styles of real typography. In any case, HTML/CSS looks like a dead end for rendering a readable, legible text. PDF? TeX? I don’t know. What I do know, there’s no ‘advent’ of anything to even touch ‘The Elements of Typographic Style’ yet. (though there were good 200 dpi LCD screens by IBM, Samsung couple years ago – for a price, yes)
65
Rich, Thanks for creating this project. The web is now a place littered with projects created by those who don’t even know that the study of typography exists. I’m glad your providing solutions for the web design community. Let me know if I can be of any help or if you’d be willing to let me collaborate with you on this project.
For those of you ranting about how badly this project displays on Internet Explorer try to remember that Microsoft did not build a proper CSS rendering engine into their browser. Therefore CSS that is created to the W3C spec may not ever render correctly with IE (esp IE on the mac) I think its more important to know the standard compliant way to accomplish web typography than it is to know how to hack everything to work with IE as that’s an entire project in itself that would be magnitudes larger than the goals of this project.
66
localudal – I don’t really see how HTML/CSS is a ‘dead end’ for rendering readable/legible text. Sure with PDF you have precise control over layout and typeface, but it’s not necessarily going to be any more readable than a web page on a screen.
And if we’re honest, even if a web page is rendered in lowly Times New Roman, it’s a perfectly readable typeface and with some care the page can be made to be comfortably legible too.
Your comments about screen resolutions are valid to a point, but as you say IBM have been producing 200 dpi screens for a while. In the not too distant future (which is what I’m really trying to address) 300 dpi screens – the same resolution as early mass produced laser printers – will be available. People like Apple are developing resolution-independent operating systems with precisely this in mind.
Bryce – Thanks for the support. I do intend to fix some of the major IE6 issues on the site, particularly the jogging text problem.
67
Have you thought about or are you planning on adding print stylesheets to the site? I know that you said that you will be adding features as you go along, but I think that would be a very nice feature to get in there. For great reference sites like this, I often like to print them out.
Thanks for the great site, by the way. I’m looking forward to the new entries.
68
just found your new venture and will read future episodes with interest
will you be styling the contents of this comment box ?
69
I’ve ordered the book and it seems you know what you’re talking about, so i’m sure i’ll read the ‘Applied to the web’ bit online, but…
why the hell is your code so buggy in IE. have you even tried it? check it out! paragraphs moving around, characters overlapping… it’s great!
like, i hate IE & MS as much as the next dork, and i know they don’t follow the rules… but you’ve got to play the numbers. and with than 80% of people (in general) prefering IE, nuf said.
maybe you’re taking the line that no self respecting web typography person could possibly be using IE, so screw them that try. or maybe you just didn’t bother testing and adding hacks to your stylesheet to cater for IE cos you’re lazy.
whatever the reason, i’m curious.
70
sam – yes I’m lazy, can’t you tell?
71
I bookmarked your site. I love the book you based it on. I think you have a strong beginning. Your bibliography alone is worth stopping by.
You comments link gets lost and I am still a bit confused by your table of contents. To me it looks like all you put up is chapter 2!
And the font is a bit small, but since you defined it with ems, easy to adjust. Nice start.
72
Christopher – thanks for the comment. The table of contents hasn’t actually confused you – I have only put up (a part of) chapter 2 so far. This is still a work in progress.
The comments links is deliberately small for the moment. I’ll probably open up comments for each page individually sometime in the near future.
73
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/ says “CSS has no concept of columns per say”, you should probably update this now to reflect columns in CSS3 since they are now supported by Opera.
Thanks for a great site!
– Longtime clagnut reader, fellow brit and web typography nerd.74
Absolutely great.
75
yes, really fine reference!
but why defining font sizes in px?
76
I was taught that the extra space at the end of a sentence distinguishes a new sentence from a proper noun being proceeded by an abbreviation.
77
Bravo! I am not a typographer or designer but do read! Your site is eminently readable and looks good and deals with a subject hugely in need of airing.
I would agree with you that the type size is slightly too small as it relates to the ‘norm’ for websites. The first thing I did was increase the ‘size’ by one ‘notch’ (reading 17” flat screen/1280 px wide).
Kind regards
CS
78
Great stuff. I’ve been following your progress via RSS.
Just wanted to point out at typo in the kerning principle 2.1.8
“Howeverm”
79
Excellent work – more please! The chapter on spacing was particularly good, and inspired me to rework my home page to make it better spaced (and IE-incompatible).
80
Error in this sentence:
“In fact only the letter-spacing property can be applied at all for this purpose, at that simply changes the width of the letters (but not their shape).”
Should read “... AND that simply changes…”
81
An useful usage of a small negative letters spacing is to get a better “...” emulating the hellip (…) character when you’d like to still get “...” on version 3 browsers.
Like .hellip { letter-spacing:-1px; }
<span class=”hellip”>...</span>
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.