Technical Web Typography: Guidelines and Techniques

Advertisement

Editor’s Note: This article is a bit out of date — please proceed reading with caution.

The Web is 95% typography1, 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:

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 piece13 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 Fontdeck14 and Typekit15 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 awful16 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-Serif17):

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 article18, 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)19.

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’s20 16-column 960 Grid System21 (demo22). 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 image23:

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:

Screenshot24

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 leading2625;
  • for a shorter measure, use slightly smaller leading2625.

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:

Screenshot27

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;
}

Screenshot28

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 type29 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 this30.

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:

Screenshot31

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:

Screenshot32

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:

Screenshot33

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:

Screenshot34

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:

Screenshot35

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:

Screenshot36

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 Indenting37.” You might also want to look at Jon Tan’s silo38.

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.js39, 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 “ (&lsquo; and &ldquo;, respectively). Right single and right double quotation marks look like this: ’ and ” (&rsquo; and &rdquo;, 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 ″ (&prime; and &Prime;, 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 Typography40: “… 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&rsquo;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» (&laquo;like this&raquo;). In Danish, they are used »like this« (&raquo;like this&laquo;). In German, using a combination of bottom and regular double quotation marks is common, „like this“ (&bdquo;like this&ldquo;).

For a great overview of other non-English quotation marks, see the Wikipedia entry on “Non-English Usage of Quotation Marks41.”

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 (&mdash;) 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 (&ndash;) is traditionally half the width of an em dash. It is used to denote ranges, as in “please read pages 17–25” (17&ndash;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 &hellip; (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 ’ &lsquo; and &rsquo; ‘Hey, this is a quote!’
Left double quote “ and right double quote ” &ldquo; and &rdquo; ‘Hey, this is a quote “within another” quote!’
Single prime ′ and double prime ″ &prime; and &Prime; The girl is 7′10″!
Dashes
Em dash — &mdash; A break in thought—like this
En dash – &ndash; Ages 2–5
Hyphen – – key front-end developer
Ellipsis
Ellipsis … &hellip; To be continued…

In addition to these common glyphs, there are numerous others: from the division symbol (÷ or &divide;) to the section symbol (§ or &sect;). If you’re interested in special characters and glyphs, then Wikipedia’s article on “Punctuation42” 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:

Screenshot43

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:

Screenshot44

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>&ldquo;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.&rdquo;
  <b>&mdash;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 spec45 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.

Screenshot46

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 guillemet47 (», &raquo;), but — as we covered earlier — French, German and other languages48 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: "0A000BB"; /* Insert a space then right angled-quote */
}

This simply places an encoded space and right-angled quotation mark49 after the “Read more” link by using CSS, which means you don’t have to add that quotation mark to your markup.

Screenshot50

You can use content:""; to keep the markup clean51. 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: "07E0A0"; /* Insert an tilde, then a space. */
}
h1:after {
  content: "0A007E"; /* 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.gs52. 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!

Screenshot53
The final piece, with the grid.

Screenshot54
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 Architects55
    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 Tan56
    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 Buivenga57
    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 Vinh58
    His timelessly beautiful website spurred my love for grids. He also recently wrote a book59 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)

th {
background: #e4e4e4;
}
#tt-punctuation td { padding: 3px; }

Footnotes

  1. 1 http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
  2. 2 #tt-face
  3. 3
  4. 4 #tt-grid
  5. 5 #tt-measure
  6. 6 #tt-rhythm
  7. 7 #tt-scale
  8. 8 #tt-quotes
  9. 9 #tt-dashes
  10. 10 #tt-ellipses
  11. 11 #tt-hanging
  12. 12 #tt-images
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/technical-type/index.html
  14. 14 http://fontdeck.com/
  15. 15 http://typekit.com/
  16. 16 http://csswizardry.com/type-tips/#tip-01
  17. 17 http://css-tricks.com/sans-serif/
  18. 18 http://www.informationarchitects.jp/en/100e2r/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/01.jpg
  20. 20 http://sonspring.com/
  21. 21 http://960.gs/
  22. 22 http://960.gs/demo.html
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid-01.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/02.jpg
  25. 25 #tt-rhythm
  26. 26 #tt-rhythm
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/03.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/04.jpg
  29. 29 http://vimeo.com/17079380
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/05.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/06.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/07.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/08.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/09.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/10.jpg
  37. 37 http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
  38. 38 http://jontangerine.com/silo/typography/p/
  39. 39 http://code.google.com/p/hyphenator/
  40. 40 http://www.dealpond.com/books/compare/0907259340
  41. 41 http://en.wikipedia.org/wiki/Non-English_usage_of_quotation_marks
  42. 42 http://en.wikipedia.org/wiki/Punctuation
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/11.jpg
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/12.jpg
  45. 45 https://html.spec.whatwg.org/multipage/semantics.html#the-b-element
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/13.jpg
  47. 47 http://en.wikipedia.org/wiki/Guillemets
  48. 48 http://en.wikipedia.org/wiki/Guillemets#Uses
  49. 49 http://www.evotech.net/articles/testjsentities.html
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/14.jpg
  51. 51 http://csswizardry.com/2010/09/keeping-code-clean-with-content/
  52. 52 http://960.gs/demo.html
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/15.jpg
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/16.jpg
  55. 55 http://informationarchitects.jp/
  56. 56 http://jontangerine.com/
  57. 57 http://exljbris.com/
  58. 58 http://www.subtraction.com/
  59. 59 http://www.dealpond.com/books/compare/0321703537
  60. 60 http://www.dealpond.com/books/compare/0881792063
  61. 61 http://www.dealpond.com/books/compare/0907259340
  62. 62 http://ilovetypography.com/
  63. 63 http://jontangerine.com/
  64. 64 http://www.markboulton.co.uk/

↑ Back to top Tweet itShare on Facebook

Harry Roberts  is a Senior UI Developer for Sky.com and type nerd from the UK. Enthusiastic, passionate and often outspoken, he is a writer, designer and member of Smashing Magazine’s Experts Panel. He tweets at @csswizardry.

Advertising
  1. 1

    In 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.

    0
  2. 52

    Perhaps 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!

    0
    • 103

      It has been many years since zooming failed on values set in pixels.

      But 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. :/

      0
      • 154

        Have 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? ;-)

        0
  3. 205

    Fernando Silanes

    March 15, 2011 7:32 pm

    There 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.

    0
  4. 256

    Harry,
    WHERE HAVE YOU BEEN BEFORE?
    Just teasing, This is an article that solves many of my doubts. Fantastic!!!
    Thanks for posting.

    0
  5. 307

    Line-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.

    0
  6. 358

    awesome.. really great article!
    thanks

    0
  7. 409

    On “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): −–

    0
  8. 511

    I 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.

    0
    • 562

      But 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.

      0
      • 613

        Originally 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.

        0
    • 664

      Typographic 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.

      0
  9. 715

    So helpful! Thank you!

    0
  10. 766

    Thanks Harry, very useful post!

    0
  11. 817

    Jon Butterfield

    March 17, 2011 8:58 am

    Interesting read. Thanks!

    0
  12. 868

    One of the best articles about typography on the web I have ever read!

    0
  13. 919

    The 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. :)

    0
  14. 970

    This 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.

    0
  15. 1021

    pierre vanderpol

    March 18, 2011 11:45 am

    Great 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.

    ;))

    0
    • 1072

      I 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.

      0
  16. 1123

    You are all going to die one day.

    0
  17. 1174

    Absolutely a great article, thanks!

    0
  18. 1225

    Wow, 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.

    0
  19. 1276

    Great 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.

    0
  20. 1327

    Very 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.

    0
  21. 1378

    Christian Krammer

    March 21, 2011 2:02 am

    A 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.

    0
  22. 1429

    Very nice article, but I think you don’t need to set line-height for each heading if you set line-height: 1 to body.

    0
  23. 1480

    Excellent article-very good explanation of the use of grid layout and typographic basics.

    0
  24. 1531

    Wow. 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.

    0
  25. 1582

    It 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.

    0
  26. 1633

    awesome!thanks for sharing

    0
  27. 1684

    Well 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!

    0
  28. 1735

    Helpful 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.

    0
  29. 1786

    Being 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,

    0
  30. 1837

    Never 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.

    0
  31. 1888

    I 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.

    0
  32. 1939

    Very nice… i learned more today that in few days, thanks for share!

    0
  33. 1990

    I 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.

    0
  34. 2041

    Regarding 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.

    0
  35. 2092

    These are some helpful tips! Thanks for sharing the useful information.

    0
  36. 2143

    for the great good of God!!! this article was awesome and helpfull for me… thanks for everything!!!!

    0
  37. 2194

    First 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?

    0
  38. 2245

    Just 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.

    0
  39. 2296

    I was overjoyed to see this make it into todays Smashing Newsletter. A timeless article (as technical techniques for typography have been around forever) that will be referenced in years to come.

    It’s going to make up about half the presentation for my talk tomorrow night on Web Typography.

    0
  40. 2347

    thank you for sharing….

    0
  41. 2398

    You say above “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”

    Or if you don’t set a new line-height for each title, it takes the one from body, with is already set to 24px (1.5 x font-size of body).

    So why you need to set up a line-height for each title again ?

    0
  42. 2449

    What an amazing article. Read (and foremost obey) it and you really know everything what’s important about typography on a website. Well done Harry!

    0
  43. 2500

    Thanks for the good writeup. It in truth was a leisure account it. Look complex to far introduced agreeable from you! However, how could we be in contact?

    0
  44. 2551

    I wouldn’t classify “font-family: sans-serif” as a hack – it’s actually very standards-compliant, and a good idea to boot.

    It ensures that it uses the device’s preferred sans-serif typeface, no matter the device – Windows, Mac, Android, iOS.

    The only downside is one that applies to any font stack – that individual fonts can vary in apparent size due to having different character widths and x-heights, even for the same font size. This particularly affects “font-family: serif” because on Windows it’ll choose Times New Roman, with a narrow letter width and small x-height. It’ll look very small compared to the default serif font on some other platforms.

    0
  45. 2602

    I have bookmarked it for reference. The proper combination of size with font type matters to produce remarkable design.

    0
  46. 2653

    My spouse and i was overjoyed to find out this kind of help it become in the present day Wonderful Newsletter. The timeless post (as technological techniques for typography are close to forever) that is to be referenced inside a considerably long time.

    It’s likely to make-up most the presentation pertaining to our chat tomorrow night about World wide web Typography.

    0

↑ Back to top