Technical Web Typography: Guidelines and Techniques
The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?
Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?
Creative and Technical Typography
I’m not sure these two categories are recognized in the industry but, in my mind, the two main types of typography are creative and technical.
Creative typography involves making design decisions such as which face to use, what mood the type should create, how it should be set, what tone it should have — for example, should it be airy, spacious and open (light) or condensed, bold and tight, with less white space (dark)? These decisions must be made on a per-project basis. You probably wouldn’t use the same font on a girl’s party invitation and an obituary. For me, this is creative typography: it is design-related and changes according to its application.
Technical typography is like type theory; certain rules and practices apply to party invitations just as well as they do to obituaries. These are little rules that always hold, are proven to work and are independent of design. The good news is that, because they are rules, even the most design-challenged people can make use of them and instantly raise the quality of their text from bog-standard to bang-tidy.
We’ll focus on technical type in this article. We’ll discuss the intricacies and nuances of a small set of rules while learning the code to create them.
We’ll learn about:
- How to choose a font face
- How to choose a font size
- Using a grid
- Working out the measure
- Vertical rhythm and baseline grids
- Choosing a typographic scale
- How to use proper quotes
- How to use proper dashes
- How to use proper ellipses
- How to hang punctuation
- Dealing with images in grids
Fair warning: this is an in-depth article. It requires some basic CSS knowledge. If you’d rather learn a little at a time, use the links above to jump from section to section.
If any of the code examples seem out of context or confusing, then here is the final piece that we’re going to create (merely for your reference).
Setting Things Up
To begin, copy and paste this into an index.html file, and save it to your desktop:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Your Name</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>Your Name</h1> </body> </html>
Next, copy and paste this (slightly modified) CSS reset into your style.css sheet, and save that to your machine, too:
/*------------------------------------*\
RESET
\*------------------------------------*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
background: #fff;
color: #333;
}
Choosing A Font Face
First, let’s choose a face in which to set our project. There is, as you know, a solid base of Web-safe fonts to choose from. There are also amazing services like Fontdeck and Typekit that leverage @font-face to add non-standard fonts in a fairly robust way.
We’re not going to use any of those, though. To prove that technical type can make anything look better, let’s restrict ourselves to a typical font stack.
Let’s use a serif stack for this project, because technical type works wonders on serif faces:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #333;
}
Cambria is a beautiful font, specifically designed for on-screen reading and to be aesthetically pleasing when printed at small sizes. If you want to alter this or use a sans-serif stack, be my guest.
On Using Helvetica
If you’d like to use Helvetica in your stack, remember that Helvetica looks awful as body copy on a PC. To alleviate this, use the following trick to serve Helvetica to Macs and Arial to PCs (you can find more details about this trick in Chris Coyier’s recent article Sans-Serif):
html {
font-family: sans-serif; /* Serve the machine’s default sans face. */
background: #fff;
color: #333;
}
Beware! This is a hack. It works by using a system’s default sans font as the font for the page. By default, a Mac will use Helvetica and a PC will use Arial. However, if a user has changed their system preferences, this will not be the case, so use with caution.
Choosing A Font Size
Oliver Reichenstein authored an inspiring article, way back in 2006, stating that the ideal size for type on the Web is 16 pixels: the user agents’ standard. This insightful article changed the way I work with type; it’s well worth a read. We’ll use 16 pixels as a base size, then. If you want to use another font size, feel free, but if you stick with 16 pixels, your CSS should look something like this:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #333;
}
If you want to use, say, 12 pixels, it will look like this:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
font-size: 0.75em; /* 16 * 0.75 = 12 */
background: #fff;
color: #333;
}
You’ll be left with a basic layout (demo).
Choosing A Grid System
The grid is an amazing tool, and it’s not just for typographical ventures. It ensures order and harmony in your designs.
Some grid systems out there, in my opinion, go a little overboard and offer 30 or more columns, all awkwardly sized. For this tutorial, we’ll use Nathan Smith’s 16-column 960 Grid System (demo). 960.gs is amazing; its beauty lies in its simplicity. It is an ideal size for designs narrower than 1020 pixels, it has a good number of columns, and the numbers are easy to work with. You might also notice that the 960 Grid System only has 940 pixels of usable space. “960” comes from the 10 pixels of gutter space on either side.
Update your CSS to use a guide background image:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: url(…/img/css/grid-01.png) center top repeat-y #fff;
color: #333;
width: 940px;
padding: 0 10px;
margin: 0 auto;
}
You should now have something like this:
Choosing A Measure
We have our font size, so now we need to work out our ideal line length, or “measure.” Robert Bringhurst writes in The Elements of Typographic Style that, “anything from 45 to 75 characters is widely regarded as a satisfactory length of line….”
A measure that is too short causes the eye to jump awkwardly from the end of line x to the start of line x + 1, and a measure that’s too long can cause the reader’s eye to double back. You can circumvent this somewhat by following these rules of thumb:
- for a longer measure, use slightly greater leading;
- for a shorter measure, use slightly smaller leading.
So, a measure of 45 to 75 characters is the optimum for readability in columns of text. I can pretty much guarantee that after you learn this, every massively, overly long measure you see on the Web will annoy you spectacularly.
Here are 69 characters, a nice middle ground between the recommended 45 and 75:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan
Paste that into your page, and count how many red columns it covers. This is how wide your measure will be:
Here we have text spanning eight columns, which is 460 pixels of 960.gs. Update your CSS to read as follows:
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: url(…/img/css/grid-01.png) center top repeat-y #fff;
color: #333;
}
body {
width: 460px;
margin: 0 auto;
}
If you picked a font size other than 16 pixels, make sure your measurements reflect this!
Vertical Rhythm: Setting A Baseline
Leading (which rhymes with “wedding”) is a typographical term from way back when typographers manually set type in letterpress machines and the like. The term refers to the act of placing lead between lines of type in order to add vertical space. In CSS, we call this line-height.
Line height should be around 140%. This isn’t a great number to work with, and it’s only a general rule, so we’ll use 150% (or 1.5 em). This way, we simply need to multiply the font size by one and a half to determine our leading.
Some general rules for leading:
- with continuous copy, use large leading;
- with light text on dark background, use large leading;
- with long line lengths, use large leading;
- with large x-height, use large leading;
- with short burst of information, use small leading.
If you used a 16-pixel font size, then your line height will be 24 pixels (16 pixels × 1.5 em = 24 pixels). If you used a 12-pixel font size, then your line height will be 18 pixels (12 pixels × 1.5 em = 18 pixels).
The Magic Number
For math-based tips on typography, check out this video on Web type by Tim Brown. The fun starts at 13:35.
The pixel value for your line height (24 pixels) will now be your magic number. This number means everything to your design. All line heights and margins will be this number or multiples thereof. I find it useful to always keep it in mind and stick to it.
Now that we know our general line height, we can define a baseline grid. The grid we currently have aligns only the elements in the y axis (up and down). A baseline grid aligns in the x axis, too. We need to update our background image now to be 24 pixels high and have a solid 1-pixel line at the bottom, like this.
Again, if you chose a font size of 12 pixels and your line height became 18 pixels, then your background image needs to be 18 pixels high with a solid horizontal line on the 18th row of pixels.
Your CSS should now look something like this:
html {
…
}
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
}
Your page should now look something like this:
As you can see, the text hovers slightly above the horizontal guideline. This doesn’t mean that anything is set incorrectly; it is merely the offset. This could hinder the process, so either tweak the padding on the body to move the page or alter the position of the background image to move it around a little. Some tinkering in Firebug tells me that the CSS needs to be as follows:
html {
…
background: url(…/img/css/grid.png) center -6px repeat-y #fff;
…
}
That gives me the following — and everything lines up perfectly:
Now, let’s get back to the magic number. Maybe you think the text is sitting too close to the top of the screen? Well, to remedy that, we’ll move the text down the page by a multiple of that magic number — let’s say 72 (3 × 24 = 72 pixels). Now adjust your CSS to read:
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
padding-top: 72px;
}
Substitute your own magic number if you used a different font size.
We should get this:
It took some doing, but our canvas is ready at last!
Setting A Scale
Okay, our reset has made our h1 and p the same size. We need to get some basic font styles in there. Add this block of code to the end of your CSS:
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: 24px;
font-weight: bold;
}
/*--- PARAGRAPHS ---*/
p {
margin-bottom: 24px;
}
Recognize your magic number? Let’s refresh the page and take a look:
Your magic number will now be the default margin-bottom value for all of your elements. This, combined with the line height, will keep everything on the baseline grid.
What we now need, though, are some different font sizes for the headings. We need a typographic scale. I suggest this:
- h1 = 24 pixels,
- h2 = 22 pixels,
- h3 = 20 pixels,
- h4 = 18 pixels,
- h5 = 16 pixels,
- h6 = 16 pixels.
Many people work in pixels, but I much prefer working in ems. An em is proportional to the current size of the font: 1 em in 72-point Georgia is 72 points, and 1 em in 8-point Garamond is 8 points.
So, if our base font size is 16 pixels (1 em), then 24 pixels would be 1.5 ems (24 ÷ 16 = 1.5). If we continue, we end up with:
- h1 = 24 pixels → 24 ÷ 16 = 1.5 ems
- h2 = 22 pixels → 22 ÷ 16 = 1.375 ems
- h3 = 20 pixels → 20 ÷ 16 = 1.25 ems
- h4 = 18 pixels → 18 ÷ 16 = 1.125 ems
- h5 = 16 pixels → 16 ÷ 16 = 1 ems
- h6 = 16 pixels → 16 ÷ 16 = 1 ems
Next, we need to make sure the line height of each is 24 pixels. This means that the h1 at a 24-point font size will have a line height of 1 em. Here’s the math:
(magic number) ÷ (font size) = (line height)
Using our scale, the full CSS for the headings (including the math) is:
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: 24px;
font-weight: bold;
}
h1 {
font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
}
h2 {
font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
}
h3 {
font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */
line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */
}
h4 {
font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */
line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */
}
h5, h6 {
font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
}
There’s our typographic scale.
Now, to test it, let’s try the following markup:
<body> <h1>Your Name</h1> <h2>Your Name</h2> <h3>Your Name</h3> <h4>Your Name</h4> <h5>Your Name</h5> <h6>Your Name</h6> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan</p> </body>
You might notice that not all of the lines of text sit perfectly on a gridline, but that’s okay because they all honor the baseline! This is what I get:
You might think that something has gone wrong. But if you look, the paragraph lies just fine once you get back to the normal font size. To be honest, I’m not entirely sure about what causes this effect; the numbers we used are all correct, and the vertical rhythm as a whole remains intact, but individual lines of larger text appear to be offset from the baseline. I think this could be due, in part, to the glyphs’ setting in their em box.
What Next?
Head back into your markup and remove everything except the h1. Now we’re ready to do something useful. Let’s make a little “About you”-page.
The h1 is the name. And the markup can simply be:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Harry Roberts</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>Harry Roberts</h1> </body> </html>
Now let’s add a little introductory paragraph about yourself. Mine reads:
<p>Hi there. My name is Harry Roberts. I am a Web developer and type geek from the UK. I love all things Web dev, and I am a huge advocate of Web standards and proper ethics.</p>
Let’s experiment with altering the font size arbitrarily. Add this to your CSS:
*--- PARAGRAPHS ---*/
p {
margin-bottom: 24px;
}
body > p:first-of-type {
font-size: 1.125em;
/* 18px → 18 ÷ 16 = 1.125 */
line-height: 1.333em;
/* 24px → 24 ÷ 18 = 1.3333(3) */
}
Here we’re giving the first paragraph — a direct descendant of the body element — a font size of 18 pixels and a line height of 24 pixels. See, there’s your magic number again!
You might again see slight oddities with the paragraph sitting on the baseline. To make sure the vertical rhythm is still intact, duplicate the paragraph once more. You should get this:
Here you can see that the vertical rhythm is still intact and working correctly.
Now for the best bits.
Tips on Technical Typography
There’s a good chance that you won’t want the grid to always be on, so change this CSS:
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: url(…/img/css/grid.png) center -6px repeat-y #fff;
color: #333;
}
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
padding-top: 72px;
}
… to this:
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
color: #333;
}
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
padding-top: 72px;
background: #fff;
}
body:hover {
background: url(…/img/css/grid.png) center -6px repeat-y #fff;
}
This will show the grid when you hover over the body, and hide it when you don’t.
Spacing And Setting Paragraphs
We’ve sorted out the magic number, and we know we should use it to space the elements, but there’s more than one way to denote the beginning of a new paragraph. One is the method we’re already using: inserting a blank space (one magic number) between the paragraphs. The second is indentation.
Typically, you would indent every paragraph except the first in a body of text; the first paragraph has no indent and the second, third, fourth and so on do have an indent (typically with a width of 1 em).
Enric Jardi writes in Twenty-Two Tips on Typography that, “… you must not use both indentation and a line break at the same time; that is redundant.”
Here’s some quick CSS for indenting only the second and subsequent paragraphs in a body of text:
p {
margin-bottom: 24px;
}
p+p {
text-indent: 1em;
margin-top: -24px;
}
For an explanation of how and why this works, refer to my other article, “Mo’ Robust Paragraph Indenting.” You might also want to look at Jon Tan’s silo.
Alignment
When setting type on the Web, use a range-left, ragged-right style. This basically means left-justifying the type. If you use a sufficiently long measure, then your rags (the uneven edges on the right side of a left-aligned paragraph) will generally be clean; the raggedness of their appearance can, however, be exacerbated at short measures, where a large percentage of each line could end up as white space.
Justified typesetting can look great but lead to unsightly “rivers” in the text. To avoid this, rewrite the copy to remove them, or use something like Hyphenator.js, which is remarkably effective.
Proper Quotations Marks, Dashes And Ellipses
Quotation Marks
Many people are unaware that there are proper quotation marks and “ambidextrous” quotation marks. The single- and double-quotation keys on your keyboard are not, in fact, true quotation marks. They are catch-alls that can function as both left and right single and double quotation marks; they are, essentially, four glyphs in one key.
The reason behind this is simply space. A keyboard cannot feasibly fit proper left and right single and double quotation marks.
So, what is a proper quotation mark? A curly (or “book”) quotation mark is rounded and more angular than an ambidextrous (keyboard-style) quotation mark. Left single and left double quotation marks look like this: ‘ and “ (‘ and “, respectively). Right single and right double quotation marks look like this: ’ and ” (’ and ”, respectively).
Many people incorrectly refer to ambidextrous quotation marks as “primes,” but a prime is a different glyph. Single and double primes look like this: ′ and ″ (′ and ″, respectively). They are used to denote feet and inches (e.g. 5′10″).
I said that one key incorporates four glyphs. In fact, two keys incorporate six glyphs.
Which Quotation Marks Should You Use?
The type of quotation marks to use (double or single) varies from country to country and style guide to style guide. Double quotation marks are typically used to quote a written or spoken source, and single quotation marks are used for quotes within quotes.
However, I much prefer Jost Hochuli’s advice in Detail in Typography: “… the appearance is improved by using the more obtrusive double quotation marks for the less frequent quotations within quotations.” Which basically means, for a nicer appearance, use single quotation marks, and then double quotation marks for quotes within quotes. (If I had a penny for every time I said quotes in this section.)
For example:
‘And then he said to me, “Do you like typography?” And naturally I said that I did.’
Use a right single quotation mark where you’d normally use an apostrophe in text: “I’m a massive typography nerd!” (I’m a massive typography nerd!)
In short, stop using those horrible keyboard quotation marks, and start using lovely curly marks in your work.
Non-English Quotation Marks
The quotation marks we’ve covered are used in English, but quotes look different in other languages.
French and Spanish use guillemets, «like this» («like this»). In Danish, they are used »like this« (»like this«). In German, using a combination of bottom and regular double quotation marks is common, „like this“ („like this“).
For a great overview of other non-English quotation marks, see the Wikipedia entry on “Non-English Usage of Quotation Marks.”
Dashes
We know that keyboards can’t accommodate all quotation marks; and they can’t accommodate all types of dashes either. The hyphen key (-) is another catch-all. There are three main types of dash: the em dash, en dash and hyphen.
The em dash (—) denotes a break in thought—like this. It’s called the “em” dash because, traditionally, it is one em wide. Em dashes are usually set without spaces on either side (as above).
The en dash (–) is traditionally half the width of an em dash. It is used to denote ranges, as in “please read pages 17–25” (17–25). It can also denote relational phrases, as in “father–son” or “New York–London.”
The hyphen simply ties together compound words, as in “front-end developer.”
The em dash, en dash and hyphen are different, and each has unique uses.
Ellipsis
An ellipsis is used to denote a thought trailing off. It is also used as a placeholder for omitted text in lengthy quotations.
The ellipsis has become the bane of my life. I often come across people who use a series of dots (periods) in place of a proper ellipsis, like so……
An ellipsis is not three dots. It is one glyph that looks like three dots. Its HTML entity is … (as in horizontal ellipsis).
So there were a few glyphs for you to use with quotes, primes, dashes and ellipses. Let’s recap:
| Name/Glyph | HTML entity | Example |
|---|---|---|
| Quotes and primes | ||
| Left single quote ‘ and right single quote ’ | ‘ and ’ |
‘Hey, this is a quote!’ |
| Left double quote “ and right double quote ” | “ and ” |
‘Hey, this is a quote “within another” quote!’ |
| Single prime ′ and double prime ″ | ′ and ″ |
The girl is 7′10″! |
| Dashes | ||
| Em dash — | — |
A break in thought—like this |
| En dash – | – |
Ages 2–5 |
| Hyphen - | - key | front-end developer |
| Ellipsis | ||
| Ellipsis … | … |
To be continued… |
In addition to these common glyphs, there are numerous others: from the division symbol (÷ or ÷) to the section symbol (§ or §). If you’re interested in special characters and glyphs, then Wikipedia’s article on “Punctuation” is a good place to start (just keep clicking from there).
Hanging Punctuation
Punctuation should be hung; quotation marks and bullet points should be clear of the edges of surrounding text. If that doesn’t make sense, don’t worry! Let’s add a new section to your page. Remove that duplicated paragraph and replace it with a list of facts about yourself. Mine looks like this:
<ul>
<li>
Web development
<ul>
<li>HTML(5)</li>
<li>CSS(3)</li>
<li>Accessibility</li>
<li>Progressive enhancement</li>
</ul>
</li>
<li>
Web design
<ul>
<li>Typography</li>
<li>Grids</li>
</ul>
</li>
</ul>
Add this to the end of your CSS sheet:
/*--- LISTS ---*/
ul, ol {
margin-bottom: 24px;
/* Remember, if your magic number is
different to this, use your own. */
}
ul {
list-style: square outside;
}
ul ul,
ol ol {
margin: 0 0 0 60px;
}
My page now looks like this:
We’ve given the lists our magic number as a margin, set the bullets to be hung outside of the text (i.e. the bullets will sit in the white of the gutter, not the pink of the column) and indented lists within lists by one grid column.
Experiment by nesting lists more and more deeply:
Hang quotation marks as well as bullets. Let’s add some more text and a quote to our page:
<p>Vestibulum adipiscing lectus ut risus adipiscing mattis sed ac lectus. Cras pharetra lorem eget diam consectetur sit amet congue nunc consequat. Curabitur consectetur ullamcorper varius. Nulla sit amet sem ac velit auctor aliquet. Quisque nec arcu non nulla adipiscing rhoncus ut nec lorem. Vestibulum non ipsum arcu. Quisque dapibus orci vitae massa fringilla sit amet viverra nulla.</p> <blockquote> <p>“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus.” <b>—Joe Bloggs</b></p> </blockquote>
The markup here is pretty straightforward: a blockquote surrounding a paragraph. You might also notice the use of a b element to mark up the name. The HTML spec states that “The b element [is used for] spans of text whose typical typographic presentation is boldened.” This is a loose definition, so its use for bolding the name of a person is acceptable.
Now, add this to the end of your CSS sheet:
/*--- QUOTES ---*/
blockquote {
margin: 0 60px 0 45px;
border-left: 5px solid #ccc;
padding-left: 10px;
text-indent: -0.4em;
}
blockquote b {
display: block;
text-indent: 0;
}
Here we indent the quote by 60 pixels from the left and right (i.e. 45-pixel margin + 5-pixel border + 10-pixel padding = 60 pixels), taking it in by one column of the grid. We then use a negative text-indent to make the opening quote hang outside of the body of text. The number I used works perfectly for Cambria, but you can experiment with the font of your choice. (Don’t forget to remove the text-indent on the b.) Now we know how to hang bullets and quotation marks.
Maybe you’re wondering why I’m using double quotation marks here after recommending single quotation marks. The reason is purely aesthetic. Hanging double quotation marks in blockquote tags simply looks nicer.
Guillemets
Now that we’ve done that, let’s add a “Read more” link to get us from this little page to, say, our portfolio’s full “About” page. We want to imply direction or movement with this link because it’s going to take us elsewhere. We could, as many people do, use a guillemet (», »), but — as we covered earlier — French, German and other languages use this glyph as a quotation mark. Therefore, it shouldn’t be used stylistically. Add this markup to your page:
<p><a href="http://csswizardry.com/about/" class="read-more">Read more</a></p>
Add this to the end of your CSS file:
/*--- LINKS ---*/
a {
color: #09f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active,
a:focus {
position: relative;
top: 1px;
}
.read-more:after {
content: "\00A0\000BB"; /* Insert a space then right angled-quote */
}
This simply places an encoded space and right-angled quotation mark after the “Read more” link by using CSS, which means you don’t have to add that quotation mark to your markup.
You can use content:""; to keep the markup clean. This means that other things, such as stylistic right-angled quotation marks and other decorative items of type, can be added with CSS to keep the markup free of non-semantic elements.
Let’s say you wanted to add tildes to either side of a heading:
h1 {
text-align: center;
}
h1:before {
content: "\007E\00A0"; /* Insert an tilde, then a space. */
}
h1:after {
content: "\00A0\007E"; /* Insert a space, then an tilde. */
}
Some Images
Elements such as tables and images are notoriously difficult to fit into baseline grids unless you save every one as a multiple of your magic number. However, we can float images left and right within the y axis of the grid and allow text to fit the baseline around it. Grab an image of yourself (or your cat or whatever) and crop it to a width that fits our 16-column 960.gs. I’m going to use a 160-pixel-wide image (i.e. three grid columns).
Place it in the markup just after your h1, thus:
… <body> <h1>Harry Roberts</h1> <img src="img/me.jpg" alt="A photo of me." id="me" />
If you hit “Refresh” now, it will likely break the baseline. Never fear — add this CSS:
/*------------------------------------*\
IMAGES
\*------------------------------------*/
#me {
float: right;
margin: 0 0 0 20px;
display: block;
width: 148px;
height: auto;
padding: 5px;
border: 1px solid #ccc;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
Notice how the image doesn’t appear to sit on the baseline, but the rest of the text does? Beautiful, isn’t it?
So, there you have it. Using nothing more than plain ol’ browser text, one image, a lot of typography knowledge and some careful, caring attention, you’ve made a full page of typographic splendor — a page that uses a grid, a baseline, proper punctuation and glyphs, an ideal measure and leading and a typographic scale.
Now get in there! Add elements, subtract them, add colors, add your own creative type. Just remember the few simple rules and your magic number, and you’re away!
The final piece, with the grid.
The final piece, without the grid.
Final Words
In this admittedly long piece, we have discussed only technical typography. Everything in this article can be applied to almost any project. None of it was speculation; these are tried and tested methods and proven tips for beautiful Web type.
If you’d like to see more creative applications of Web type, then check out the work of the following creatives (each of whom has had much influence on my career so far):
- Oliver Reichenstein of Information Architects
A huge inspiration to me and a very knowledgeable guy who has a passion and talent for readable, sensible and beautiful type on the Web. - Jon Tan
Jon’s website is gorgeous. He is a member of the International Society of Typographic Designers (ISTD), and his writings and “silo” (on his personal website) are a hive of typographical information. - Jos Buivenga
Not strictly a Web-type guy, but Jos is the creator of some of the most beautiful (and free!) fonts in existence. His work got me hooked on typography. - Khoi Vinh
His timelessly beautiful website spurred my love for grids. He also recently wrote a book on that very subject.
Keep in mind that you don’t have to be the world’s best designer to create beautiful type. You just have to care.
Further Reading
(al)
Awesh
March 14th, 2011 6:11 amAwesome article.. i was looking for this type of article… thanks for sharing…
Illusiv
March 14th, 2011 6:25 amThis is one great and useful article. Thank you for that!
Tyler
March 14th, 2011 6:25 amAwesome article. Thanks.
David
March 14th, 2011 6:28 amGood article, I would avoid using margins in general with , blockquote and text, especially with IE. I’d rather use padding & text indent. HTML 5 boilerplate does a lot of nice reset work for you and it includes modernizr to help out with those awful marginal issues in IE.
You couldn’t be more spot on in saying “if you take the time to write something, don’t you want it to look great and be easy to read?”
However the case, a grid is a great start; it’s very traditional—but otherwise effective at helping you lay your type out clean and clear.
Calvin
March 14th, 2011 6:34 amOne of the best article I have read for a really long time. Thanks a lot!
simon
March 14th, 2011 6:36 amnot quite. the opening guillemet is followed by a thin unbreackable space, and the closing is preceeded by the same (&thinsp)
Luke
March 14th, 2011 7:23 amA great tutorial. Thank you
Reto
March 14th, 2011 7:37 amVery nice article! Keep up the good work!
Ron
March 14th, 2011 7:54 amThanks a lot! Great tutorial.
Ben
March 14th, 2011 7:57 amThanks, excellent article.
I noticed one mistake. It is stated that:
“Em dashes are usually set without spaces on either side (as above).”
… but the example DOES have a space on each side.
Vitaly Friedman (editor-in-chief of Smashing Magazine)
March 14th, 2011 8:32 amAs far as I know, both techniques are widely accepted. Our styleguide here, on Smashing Magazine, uses spaces on both sides of the dash, so this article was adjusted as well. Thank you for your question!
Greg
March 15th, 2011 5:27 pmBe that as it may, the language used says “with no space, as above” and then the text above does use a space. That’s still an error despite SM’s style guide!
Perhaps the phrase itself needs editing indicating that you may use spaces “as above” or keep the em dash tight to the text…?
Melanie Richards
March 16th, 2011 7:14 amIt should be noted that although both are widely used, an em dash without spaces is technically “correct.” Just in case you have anal-retentive print designers as your clients. :]
Robert O'Rourke
March 14th, 2011 8:08 amThere’s a slightly less hackish way of setting a nice sans-serif depending on your OS.
Specifying “Helvetica Neue” will work on a mac as it’s installed by default. After that you can specify Arial or just the sans-serif declaration.
Alan Vitek
March 14th, 2011 8:21 amI love typography, especially the technical end / proper methods of it. Thanks for sharing this article; very insightful and LOTS TO LEARN!
grofab
March 14th, 2011 8:21 amAwesome article, just what I was looking for. Thanks
Scott
March 14th, 2011 8:31 amGreat tips on polishing our type skills, thank you.
One thing though. For the magic number, would we be better off using em instead of pixel units?
Jos Buivenga
March 14th, 2011 8:33 amWow, thanks for the mention, Harry!
felix
March 14th, 2011 8:38 amGreat article. One thing seems odd – why are the top level bullets jumping outside of the left margin? I don’t think I’ve ever seen that treatment before…
Jessie
March 14th, 2011 11:48 amThe author is correct in pointing out that punctuation doesn’t belong at the margin of text. What is called “hanging” punctuation is the correct method to use. A lot of typographic details that was used for print was left behind when the web came along because it was too complex to format correctly. Now that we have the ability to format things correctly, we should try to do so.
onioneye
March 14th, 2011 8:50 amYou have no clue how long I’ve been searching for an article like this that deals with web typography. It rocks, and so does your blog, Harry. I’ve been a follower for a while now.
Cheers mate :)
Alexey Sinkevich
March 14th, 2011 10:56 amThat’s cool! Like a very big book with 1000′s pages…
Ralph
March 14th, 2011 11:13 amThank you a lot. Your article help me to understand the grid-system better.
Jessie
March 14th, 2011 11:42 amI just wanted to point out a fact that the author either doesn’t understand about typography or didn’t point out. The key unit of measurement you are using is “em” and you state that one em is the equivalent of 16 pixels. The em unit is a relative unit to the font size you are actually already setting; it is typically a horizontal unit that originates from the width of that fonts capital letter “M”. Therefore 1.5ems to a default of 16 pixels font size is not the same 1.5ems if the font size is different. In typography, points (pts) are used for most vertical height measurements and ems are used for a horizontal measurement. One point is 1/72nd of an inch (that is why all text editors go up to size 72 by default – it is one inch tall and also where the original 72dpi came from on monitors) and the typical leading is 120% of the font size in points for print text layouts. I have read that studies show the eye needs a little more space between lines for screen than paper, so 130% – 140% is nice (i.e. 12pt font with a 16pt leading).
Other than that, I think this was an excellent read and a great article to be found on Smashing Magazine! The author did an excellent job, I just wish that html 5 / css3 had incorporated more typographic control for things such as widows and orphans
Satish Gandham
March 14th, 2011 12:45 pm+1
If you set the body font size as 12px, then 1em will be 12px.
for example
body{font: 12px/1.5em} is equivalent to body{font: 12px/18px}
h1{font: 32px; margin-bottom:1em} is equivalent to h1{font: 32px; margin-bottom:32px}
Paul M
March 14th, 2011 8:44 pmI’m pretty sure you’ve just misread… What he said was:
“So, if our base font size is 16 pixels (1 em), then 24 pixels would be 1.5 ems (24 ÷ 16 = 1.5). If we continue, we end up with:”
Perhaps it could have been better explained – but most people who have got this far with type on the web already know that ems are relative.
Rajeshkannan MJ
March 14th, 2011 12:18 pmAwesome article. I am sure “must have” documentation for every designer.
I was expecting some kind of this article to get better idea about grid system and typography.
I am little aware that padding and margin are related to typography. But grid and typography is definitely new to me and i am sure i can use it on my WP themes.
Thank you,
Satish Gandham
March 14th, 2011 12:41 pmMost of the points were covered in earlier articles on SM, but this will serve as a refresher.
I would love to see a article on Creative typography.
Satish Gandham
March 14th, 2011 12:51 pmI feel that 1.5em for headings doesn’t make the headings stand out, and with the font sizes you choose for headings there will be no clear distinction between each one of them.
I use this (doesn’t break the vertical rhythm)
h1,.h1{font-size:3.00em; margin-bottom:0.50em;line-height:1.00em}
h2,.h2{font-size:2.00em; margin-bottom:0.75em;line-height:1.50em}
h3,.h3{font-size:1.50em; margin-bottom:1.00em;line-height:1.00em}
h4,.h4{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}
h5,.h5{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}
h6,.h6{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}
3em is too large for h1, but haven’t found a better solution.
Chris Nager
March 14th, 2011 1:00 pmHarry, you dog. This article is gold. I love all your work @csswizardy and appreciate your passion for good type.
**Correction needed in the second to last sentence: “Keep in mind tou don’t have to be the world’s best designer to create beautiful type.” (tou / you)
Vitaly Friedman (editor-in-chief of Smashing Magazine)
March 14th, 2011 1:31 pmThank you for pointing it out! The mistake is fixed now.
Valentin Spitsyn
March 14th, 2011 1:16 pmThis is exactly what I needed, as I’m reading the Smashing Typography book now. Right on time!
Thanks!
Dave Allen
March 14th, 2011 2:04 pmGreat piece. Although HTML5 means we’ll have to start using decimal and hex in place of the current character entities at some point. Farewell …
http://www.html-5.com/cheat-sheet/html-character-codes.html
Colin
March 15th, 2011 6:22 pmEven better, use utf-8 characters; years ago we went fully utf-8 from front to back: .htaccess charset, file encoding, meta tag charset, mysql db & table encoding [including driver], and now I never have to see another frigging &dumbcode; in the middle of my text. We live in an internationalized world, we don’t type é in French we type é, why should web designers have to deal with this?
It’s surprising to me that people still worry about awkward html entities for character encoding stuff. This reminds me of the 90′s going to webreference.com to check the iso-8859-1 list. Boring.
Great article though!
James Moxley
March 14th, 2011 2:29 pmGreat article thanks for writing
I prefer using px for font sizes, using em is great for relative values such as line height but not for font sizes. For one simple reason, images don’t use em, the whole page should scale not just the text, most modern browsers do this already.
As for 960 gs, its wonderful, but it breaks the principles of css zen, imagine writing your document then removing the css and the replacing it with another style sheet. You would have to go through the document removing and replacing classes. The other problem with 960 is the small 10px outer margin, really should be 20px, 980px in total, reason is that the outside margins should keep the same spacing as the inner gutters, keeping the white space consistent. I still think its great, the dimensions page on the 960.gs is very handy.
Thanks again for the article.
Tomer
March 14th, 2011 2:36 pmI wouldn’t say it is strictly true to say that hanging punctuation is always better. For example when your body text is constrained within a fixed boxed area, hanging punctuation can break the white space surrounding the text. It could also fall on the border around objects which can look odd.
I also like to have the bullets indented when the points they have are more important than the text surrounding them. People tend to skim body’s of text for the significant pieces of information which is often summarized in bullet points, and indented bullets are more visually distinct than hanging ones.
Other than that a fairly interesting read thanks.
Michael
March 17th, 2011 10:42 amTomer, I think I agree with you on this, at least for bullet points.
If I was going to use hanging punctuation though, I’d opt for the CSS3 hanging punctuation (http://www.w3.org/TR/2011/WD-css3-text-20110215/#hanging-punctuation0) rather than toying with the margins as in the article.
John
March 14th, 2011 3:50 pmreally great article! It’s hard to find good info. out there regarding technical typography. Much appreciated.
Phuoc Huynh
March 14th, 2011 6:32 pmIt is a very good article that i’m looking for a long time. Thanks for your effort to bring us these useful knowledges. You’re rocks !!!
Matt
March 14th, 2011 7:09 pmGreat read! I would love to see more articles like this on Smashing Magazine.
byutea
March 14th, 2011 8:00 pmwow, thank’s for the magic number! it’s work for me. :-)
Lufutu
March 14th, 2011 11:03 pmGreate article, should have label “MUST READ” !
Đurica Bogosavljev
March 16th, 2011 2:42 amMaybe is better to have label – “MUST LEARN” beside “MUST READ”! Or both…
:-)
Andreas
March 14th, 2011 11:10 pmGreat! Was searching for something like that for a long time…
Dmitry
March 14th, 2011 11:20 pmRussian also use guillemets, as well as number of other European and Asian languages. But please, never ever use guillemet as an arrow. It’s clearly NOT an arrow, and half of the world will not understand at all why you use quotation mark as one, so it’s really a bad advice you have in brilliant article. Use → or ← instead. Look → isn’t it better?
Tim
March 17th, 2011 12:48 pmFor an international site, sure, but if the site’s audience is primarily North American I would argue that using guillemets as ‘see more’ arrows is all right because that’s convention in this part of the world.
Dmitry
March 19th, 2011 8:19 pmI agree. However I think it’s good to remember the meaning of guillemet.
Kedar Patil
March 14th, 2011 11:25 pmVery nice article! Keep up the good work!
sangeeta
March 14th, 2011 11:40 pmOne of the best and most informative article on typography ( a very essential and important aspect of webpage design ). The magic number concept seriously seems like magic. It’s true that math can be applied everywhere and anywhere. The final outcome of this typography care taken is so clean, readable and beautiful :) . Thank you Harry
Looking forward to an article on creative typography.
Mark Hewitt
March 15th, 2011 12:32 amThanks for a great article Harry, it’s really pushed my typography forward. I have a question for yourself or the comment crowd: How do you feel about setting font sizes in percentages? (my current practice)
Lauhakari [mikko]
March 15th, 2011 12:56 amawesome article! I only have one, huge?, point as with many other typography related articles.
People seem to rely on the fact that users have 16px as standard in their browser… When that really isn’t the case many times!
So why don’t people, still, set the base font-size at the start in the body element.
Sure the users loses some control, but hey, if it’s too small the can zoom :D
Jochen
March 15th, 2011 1:14 amhaving a grid which is somewhat the line height of the largest font in use is nice but a baseline grid must not necessarily be the line height. Imho it is relatively boring to separate paragraphs with a full empty line (which is the conclusion of your implementation, isn’t it?).
To be precise, i think it is quite contrary to my understanding of legibility.
Egor Kloos
March 15th, 2011 1:31 amAlways good to see typographical orientated articles. Lots of good stuff this time!
On the other hand baselining typography for the web isn’t as useful as some think. It helps to make your work consistent but it doesn’t in of itself make the work any better.
Personally I think using only the sans-serif value for the font-family property is not a hack. The lack of a typeface fallback is indeed problematic but hardly a hack. I’ve used this, well, um, approach for monospace. Finally, one more little nitpick, I’ve found that omitting units like ‘em’, ‘px’ etcetera on the line-height property to give more consistent results across browsers.
One interesting approach that I might reconsider for some of my projects is the use of margins on paragraphs. It’s still problematic across browsers (looking at you IE) but it does make for a cleaner CSS.
Jonas Stensved
March 15th, 2011 1:49 amHere’s a little css-snippet to test a website with the grid mentioned in this article. Just copy-paste in Firefox Web Developer ‘Edit CSS’ or similar tool.
* {background:none !important;}
body {background:url(http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/technical-type/img/css/grid-01.png) center repeat-y !important;}
Jimmy
March 15th, 2011 1:55 amThis guy means business.
Jeremiah Reagan
April 24th, 2011 5:35 pmHe beyond means business… I’m a web developer myself and this was extremely intriguing. Thanks for this info Harry, we really appreciate it… Honestly though, I had a tough time rapping my head around your second (of the 2) of your “typography’s,” being the “technical typography” – I still, even after your short blurb about it, have no idea what you were talking about bud, can you clarify it a bit more for an idiot like myself that needs a good smack every now and then. (don’t tell my fiance I said that, ha)
Cheers Harry,
Jeremiah R.
Altrea
March 15th, 2011 1:58 amGreat Article!
“I’m not entirely sure about what causes this effect; the numbers we used are all correct, and the vertical rhythm as a whole remains intact, but individual lines of larger text appear to be offset from the baseline.”
Thats because the -6px padding for the grid image. Texts are vertically centered to the line-height, not baselined. With this 6px adjustment your line is based on a single font size.
Adam
March 25th, 2011 11:25 amIt seems there should be a CSS solution (perhaps with some math) to put these elements back on the baseline then?
Chris Blunt
March 15th, 2011 2:11 amAbsolutely loved this article – well written and great to have solid, practical advice on typography for web developers.
Thanks!
Sam
March 15th, 2011 2:11 amFantastic. THIS is the reason I started following Smashing Magazine all those years ago. Wonderful article.
David Platt
March 15th, 2011 4:21 amThe massive amount of advertising on this page makes the article impossible to focus on
Angga
March 15th, 2011 7:07 amSmashing mag gets better everyday ! please keep more posts like these coming!!
topdesignmag
March 15th, 2011 7:29 amHmmm…95% Typography? I think it depends on what type of website it is. Take a look at apple.com and you’ll see that is 95% “imageography” ( I just invented a new word, cool :D )
ivanicus
March 25th, 2011 4:04 amSorry, but no…
http://www.google.com/search?q=imageography&ie=utf-8&oe=utf-8
cela
March 15th, 2011 8:00 amexcellent!! thanks :)
PGabor
March 15th, 2011 10:26 amIn my experience, the nicest way to set images’ height is this:
image height + padding-top + padding-bottom + border-top + border-bottom = n x line-height + font size
It takes some experiment on the image’s top margin (usually half of the font-size) and the picture will nicely sit on the baseline and the top border will fit to the text too.
Greg
March 15th, 2011 5:45 pmPerhaps I’m missing the mark here, but I think a lot of web designers and developers bitten by the typography bug are still using ems because it makes everything feel so much more… typographic! Using ems, you feel like you’re doing something that requires craft rather than assembling pixels like so much Lego. Despite knowing it’s just one of our handful of choices for unit of measurement, that unbreakable link between the em and the beauty of print typography is causing us to romanticize its usage. And on the modern web, it strikes me as the wrong tool for the job.
Since ems are relative, nested elements will not scale properly and will break without care. If we all had beautiful, simple, clean, typography-based websites, it would never be an issue. But people new to web typography and looking for advice, are going to be confused when elements are set in font sizes larger or smaller than they expected. “My body is 16px; this element is inside the body; why isn’t it the right size?”
The point is driven home by your conversion of ems to pixels. Why put up that layer of abstraction? If you want a particular element to be 18px, why not just declare it as such and be done with it, rather than working out the conversion to ems? It has been many years since zooming failed on values set in pixels.
There’s hope for new life to the em, though… the introduction of pixel-dense displays to the mass market (the iPhone 4′s retina display or super AMOLED displays) mean that we can’t treat the pixel as a constant, either. If I’m not mistaken, their rendering engines are doing the conversion for us right now, but it might not make sense to stick to px in the long-term.
But, as is typical for me (and an unfortunate character flaw!) I criticize more than praise. And the fact is that I read this article carefully and with great interest. I have bumped into some of the techniques and advice in other web typography articles, but I can honestly say that I’ve never found them collected together and presented in such an engaging way. The explanations and code examples flowed perfectly together. This is one of the best articles I have read on SM in some time. Good job!
John Faulds
March 16th, 2011 3:38 amBut that assumes that everyone uses page zooming for increasing text size. Not everyone does. If you use the view menu in Internet Explorer and select medium, larger, largest etc., if you specify your font-size in pixels, the text will not scale.
Roger Johansson discusses the issue in http://www.456bereastreet.com/archive/201010/ie_9_does_not_resize_text_sized_in_pixels/
With IE9 it’s not immediately apparent how to change text size only, but with earlier versions, you could still access the View menu in much the same way as you could with older versions, and it’s likely that if you were used to doing something with an older version, that you might want to stick to doing it that way if you happened to upgrade, so you can’t be guaranteed that everyone would be using page zoom and can’t be guaranteed that no-one is being affected by font-sizes that don’t scale.
I was having a similar discussion with other developers on Twitter recently and one told a story about a client claiming that his website’s text was too small. It turns out he had his browser text size set to smallest but because he visited so many sites that used pixels for font-size, he’d never noticed. :/
Greg
March 17th, 2011 9:22 pmHave to admit, I was ignorant to that. I have no choice but to give it to you. ;-)
Surely it would have been reasonable for the article to at least address nesting being a must-take-care, though. Or am I ignorant about something there, too? ;-)
Fernando Silanes
March 15th, 2011 7:32 pmThere is BIG problem with WEB GRIDS and you have the same problems is the line-height, it depends on the font size. So you can’t use the same line-height for the general text (size 11 pt) and the resume text (14 pt – the first paragraph).
This is a big mistake, this is a basic thing that many designers are wrong.
I hope you fix this, and explain.
Betty Rudas
March 15th, 2011 11:18 pmHarry,
WHERE HAVE YOU BEEN BEFORE?
Just teasing, This is an article that solves many of my doubts. Fantastic!!!
Thanks for posting.
John Faulds
March 16th, 2011 2:37 amLine-heights should be unitless. I’ll let Eric Meyer explain why: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
Also, I appreciate that you’re trying to stick to a baseline grid, but I’d recommend that your vertical dimensions should be specified in ems, not pixels, so that the spacing between elements grows proportionally when text size is increased in the browser (using text resizing, not zooming).
12px text with 18px spacing might look fine when the text actually is 12px, but will look a lot more cramped when the text size has been bumped up to 18px while the spacing remains the same because it’s been declared with a fixed unit.
Martin V
March 16th, 2011 6:57 amawesome.. really great article!
thanks
Jeff Lundberg
March 16th, 2011 11:00 amOn “dashes”, you forgot to differentiate between hyphens (-) and minus signs (−).
Minus sign: −
Instead of “4-3=1”, it should be “4−3=1”
Notice that the keyboard hyphen glygh appears lower than the actual minus sign, and is shorter. The center of the minus sign should line up with the center of the plus sign, and the lines themselves should be the same length as the ones on the plus sign.
See the difference (hyphen, plus, minus): -+−
The minus sign is different than the en-dash as well.
See the difference (minus sign, en-dash): −–
Chris Peckham
May 19th, 2011 7:45 amI have no idea whether the key on my keyboard to the right of zero 0 is a minus, a hyphen or a hyphen-minus!
http://en.wikipedia.org/wiki/Hyphen#In_computing
At least I’m aware of the difference now ;-)
Richard
March 16th, 2011 1:44 pmI know it’s blasphemy, but I’ve never seen much benefit to grids, equal baselines, etc. Maybe it makes me less of a “professional”, but without the visible grid and guidelines turned on, I’d never have noticed you went to that trouble on your page. Sometimes it seems to me that those things are done just to say that you did it, not because it gives you any great benefit.
Jon Laing
March 16th, 2011 10:48 pmBut surely you can see typographical harmony, right? I may not be able to directly see that all the type is lining up with this imaginary baseline, but I can CERTAINLY tell when the consideration has NOT been taken.
I disagree with the notion that proper typographical practices are just a masturbatory endeavor on the part of the designer. I think it really makes a palpable difference in harmony and (most importantly) legibility.
Great article, I shall be referring back to it.
Egor Kloos
March 18th, 2011 12:24 amOriginally baselining wasn’t intended to solve typographical harmony, however, it is a nice benefit.
Creating a rhythm is good and all but a strict baseline for everything isn’t a good idea. Set your font-sizes and line-heights early and sparingly and you’ll often be fine. Consider a baseline if the design calls for it and implement it with low specificity.
Greg
March 17th, 2011 9:34 pmTypographic harmony doesn’t rely on an absolute baseline grid. Depending on the fonts chosen, I would argue that rigid adherence to prescriptions/recipes will create DISharmony.
For example, look outside “web typography” articles and you’ll find that it’s acceptable to put anywhere between 50% and 100% of a line’s height as extra leading between paragraphs. I personally find 100% doesn’t always look right. It’s perfect when the body content tends to be built with a single strong point per paragraph, but something closer to 60% looks great when paragraphs are meant to flow into one another as in a longer narrative.
It’s an absolute myth that extra leading between paragraphs (via margin-bottom) needs to be equal to line height. So to me, Richard, it’s not blasphemy. Here’s one resource I stumbled upon which actually IS about web typography (I had implied that we should look to classical typography resources): http://explorationsintypography.com/ . In the right ‘explorations’ drop-downs, switch to “extra leading”.
Or the comments section of this article. line-height 18px, margin-bottom: 12px. :-/ Looks great to me.
That said, I don’t mean to imply that you should disregard vertical rhythm. You need to choose the right sizes and spaces to create harmony. If you opt for a smaller amount of leading between paragraphs, chances are good that a large gap between headings and body text is going to look terrible.
It’s too easy to treat web typography as a mathematical formula. It’s not (though certain measurements are definitely a great starting point!). Let’s start using our eyes as much as our calculations.
Anna
March 17th, 2011 6:51 amSo helpful! Thank you!
Ezequiel
March 17th, 2011 8:09 amThanks Harry, very useful post!
Jon Butterfield
March 17th, 2011 8:58 amInteresting read. Thanks!
Ján Jaďuď
March 17th, 2011 11:26 amOne of the best articles about typography on the web I have ever read!
MKR
March 17th, 2011 4:41 pmThe relativeness dots (..) in the url()s seem to have been autocorrected to some kind of single character that looks like three dots. Didn’t know that existed.
But it does break the code if you don’t know how to fix it. :)
Carlos R.
March 17th, 2011 4:59 pmThis is the most useful article I’ve read on the subject, THANK YOU!
You covered material that wasn’t in web classes I took and answered questions that I couldn’t find a clear answer on.
pierre vanderpol
March 18th, 2011 11:45 amGreat post…. however according to W3c school, http://www.w3schools.com/browsers/browsers_display.asp,
85% of browsers are ABOVE 1024 X 768….
So focusing on 15% of the visitors with the 960 px sounds a bit outdated to me… there is a flexible 1140px grill around that is really great.
;))
eugenek
March 21st, 2011 11:59 pmI wouldn’t base anything upon w3schools.com basically because only web developers are the ones who enter this site who are known to work with high resolutions. I work with end users on daily basis and some of them work with low resolutions. If you intend to do a website for web developers you can go as high as you can, we ( web nerds ) will find at the end what we came for but other users i doubt.
Moreover 15% is a lot. Think if Amazon got 15% less costumers, this blog 15% less readers and so on.
Elhaym
March 18th, 2011 12:24 pmYou are all going to die one day.
Joffrey Kater
March 18th, 2011 12:31 pmAbsolutely a great article, thanks!
Maurice
March 19th, 2011 8:00 amWow, very interesting article.
I think keeping the ul squares off the page is a very strange touch, I’ve never seen it done that way in any printed material I’ve ever read. I personally feel it looks much better to make the dots align with the text, then the gap between the ul ul doesn’t feel so massive.
Marco
March 19th, 2011 1:38 pmGreat article! I just have one question: what do we do with and elements, and implicitly with alternative vertical-aligns? They immediately disrupt the baseline rythm.
Kristian
March 20th, 2011 2:57 amVery good article, it has definitely given me some ideas to bring with me forward in my work, or perhaps better use what I already know from print in digital.
Christian Krammer
March 21st, 2011 2:02 amA few little things: The line-height should always be set without a unit! And to be precise: using a relative unit like em for fonts, or in general for a website, is much much better than the absolute unit px.
Bojan Apic
March 21st, 2011 2:32 amVery nice article, but I think you don’t need to set line-height for each heading if you set line-height: 1 to body.
Steve Griggs
March 21st, 2011 5:09 amExcellent article-very good explanation of the use of grid layout and typographic basics.
Jace Harmer
March 21st, 2011 10:11 amWow. I’ve obviously gridded out sites in photoshop but I have never thought to do it this way when writing up the code. Great post. Thank you for you time and help.
Michelle
March 21st, 2011 1:39 pmIt must have taken a lot of time to put this together, and I for one and very thankful you have, as I have been meaning to get to grips with grids for sometime. This has proven extremely helpful in finally explaining the ratios and will probably change the way I mockup designs from now on.
aiman
March 21st, 2011 11:09 pmawesome!thanks for sharing
Shane Carmody
March 22nd, 2011 10:28 amWell done, this is one of the most inspiring articles i have EVER read. Its detailed and well written, thank you so much. I can’t believe your only 20!!! Fair play!
Ruana
March 23rd, 2011 9:03 amHelpful and – to me – really instructing. I followed along with my own css, slightly altered there and then and the outcome is great. The page has a feeling of harmony to it which is very pleasing to look at. Therefore well worth the work.
However, I also do think that we should not follow the grid to strictly – it can make for a very boring page to look at. I found that a few carefully selected parts breaking the grid give the best (read: more interesting) result.
Thanks for the insight.
Daniela Eg.
March 24th, 2011 12:20 amBeing familiar with the works of Mark Boulton and Nathan Smith certainly helps to give a little more depth to this article. So you should definitely read the related links if you haven’t yet!
I really appreciate the visual aids and the more technical css approach, like I wrote once before, some people like me kind of need the concrete view of theories with examples and hands-on work.
Thanks,
Alexei
March 29th, 2011 7:19 pmNever hang bullets. Ever.
It breaks the left alignment (a sin on its own) and ruins the LTR hierarchy of information. If anything, you tab bullets to the right to indicate that the list is branching off from what was previously written. If you hang the bullets, then you break that relationship, which makes the bullets more like a new paragraph.
Do what you want with quotations, but hanging bullets doesn’t make a shred of sense; neither visually nor logically. Just don’t do it.
Some guy
April 3rd, 2011 12:40 amI love using 960 grid, but rarely seen someone ever use any grid, when helped to code sites. Proper grid really make coding and design faster and look better.
I prefer to use px size over em for text, because they scaled sometimes improperly, and I don’t like to calculate size.
Tom
April 3rd, 2011 11:31 pmVery nice… i learned more today that in few days, thanks for share!
Jan Ortgies
April 7th, 2011 12:24 amI find it astonishing that it is still regarded as a good practice to make pixel based layouts. We have so many different devices for viewing web content now — and they all differ in terms of pixel density.
If I base my layout thoroughly on pixels, i.e., making the body copy 16 pixels large, it will look quite ok on the standard ~94ppi TFT desktop monitor. It will be a lot harder to read once you look at it on a higher resolution notebook display (the MacBook Air already has about 135ppi, making it about 70% the size of the former “normal” TFTs, for example). Once we look at ultra high resolution displays we are seeing in smart phones (iPhone 4 has 326ppi), we are really running into major problems.
Of course, smart phone browsers compensate this by creating some kind of virtual pixels to still make it readable. But this really can’t be the long term solution, can it?
Pixels have no future — because unlike only a few years ago, displays with enormous resolution differences are widely spread. It is time to do it like print designers have done it for a very long time. Defining everything in milimeters or inches (points do not seem to work very well, I have tested this).
Think on it.
Tim
April 7th, 2011 11:36 amRegarding em dashes, I do not include spaces on either side in print, because I was that was how I was taught typography. However, I do put spaces on either side when used in web pages because of text wrapping. It can create a pretty ugly rag if you happen to have some longer words connected by an em dash.
Another thing I find interesting here is the recommendation of using a right single quote for apostrophes. It’s hard to find definitive information on this, but are an apostrophe and a right single quote truly the same thing? Even if the letterform is identical, they are still different characters. While it may not be all that important, what if you want to do a find/replace on a page? I find it quite surprising that an apostrophe, despite being such a common character, does not have an html name code that works outside of XML.
Brett Widmann
May 12th, 2011 4:36 pmThese are some helpful tips! Thanks for sharing the useful information.
TheJunior
July 8th, 2011 4:51 amfor the great good of God!!! this article was awesome and helpfull for me… thanks for everything!!!!
Nils
August 27th, 2011 6:05 amFirst of all, thank you for this awesome article, Harry. It’s well-written and really understandable, so keep up the good work.
Secondly I want to ask if anyone here experienced the same problem as me regarding Internet Explorer 9.
In every browser the text fits the gridline, even Internet Explorer < 9 in all cases, but when it comes to the lists the line height is set to 24.77 pixels, but only in IE9. As this is an odd value, IE does some math and the line height effectively becomes 25 pixels. The problem stops after the lists. From there everything is normal again.
Did anyone stumble across that, too?
Amy
October 30th, 2011 11:24 pmJust wondering—what happens to the pixel grid when the user is just learning English, has poor sight, or has a very high resolution and bumps your 16-point text up to 24 points or more? Specifying the measure in pixels means that the measure will effectively shrink as the text size increases. Furthermore, the pixel-specified measure does not intuitively feel robust across a reasonable range of screens, from an iPhone 320 pixels across to an iMac 2560 pixels across. Would 25% padding on either side be more robust? I’m not sold on physical measurements as a true solution, unless the intent is to make the site unusable on either iPhones or iMacs.