Typography quick tips

A selection of short typography tips from Harry Roberts of @csswizardry

Range left, ragged right #

This is the ideal alignment for type on the web—left aligned and unjustified—due to the inability to viably control individual letters and words. Justified type is often a poor choice, because rivers are easily created in the text.

A screenshot illustrating the appearanec of rivers in justified type compared to unjustified

The above image illustrates how justified text can create unsightly ‘rivers’ in text.

If however you do want to justify your text, you may need to rejig your copy until all rivers are gone, or at least aren’t noticable. Another alterative is to use Hyphenator.js, a particularly impressive bit of Javascript that actually hyphenates copy on the fly. I have used this once before, with great results.


Indent or space… #

…but never both when it comes to setting paragraphs. On Type Tips I leave a vertical space between paragraphs, however in this tip I am using the indenting method, as you can see.

Both are perfectly legitimate means of spacing and delimiting paragraphs on their own, but their use together is redundant. Pick one or the other and stick with it, I prefer—purely for the sake of ease—to space paragraphs, as all you need is a margin-bottom declaration. With the indenting method you need to take into account what preceded the paragraph and what will follow it.


Use proper quote marks #

In a similar vein to the use of proper dashes, there are generic quote marks on keyboards too. The quotes on keyboards are ambidextrous quote marks, which cover several different uses.

The two types of quote marks in the English language are single and double. Each have left and right versions, single being ‘ and ’ and double being “ and ”. The HTML entities for each of these are ‘ and ’ and “ and ”.

The difference between these and ambidextrous quotes are quite remarkable once it’s pointed out: 'quote' vs. ‘quote’ and "quote" vs. “quote”. The latter of each pair being much more visually pleasing, as well as simply being correct.

The prime misconception

People often incorrectly refer to keyboard quote marks as prime marks.

Some people incorrectly refer to ambidextrous quotes as being prime marks. A prime is something different altogether… A prime mark denotes measurements such as time or feet and inches, e.g. 6′4″. Their HTML entities are ′ and ″ respectively.


Use proper dashes #

On a standard English keyboard, the nearest there is to a dash is the hyphen key. The reason for a lack of dash keys is simply down to lack of space, and as such the hyphen acts as a catch-all. There are generally three types of dash; the em dash, the en dash and the hyphen, each with their own uses.

These are the general rules, abide by them for the sake of decent typography.

The em dash (—)

The em dash (—)—so named because it is the width of a capital M, and equal to one times the current font size—is used to delimit a separate clause in a sentence—rather like this—or similar sub-clause structures. Often and incorrectly used in its place however is the hyphen (-).

Spacing an em dash

Ideally you’d use a hair space ( ) to space em dashes, however these don’t render in IE6 so you have options of fully spaced or unspaced. As the em dash is quite long as it is, I choose to set em dashes unspaced to preserve horizontal gaps—thus.

The en dash (–)

The en dash (–) is used to denote ranges, for example 10–12 years, § 4–5, pp. 99–121 or relational phrases such as father–son or London–Paris.

The hyphen (-)

The hyphen is used as a conjuntion in hyphenated words such as front-end, high-pressure and low-cost. It is also used in printed materials where long words wrap over two lines.

The hyphen is not to be used in place of an em dash, because it is wrong, and it looks atrocious - wouldn’t you agree?


Quoting convention #

As well as using proper quote marks, there are actually conventions to follow when using them in English text. If you are British you should use single quotes: ‘like this’ (‘like this’) and if you are American you should use double quotes: “like this” (“like this”)

Interestingly…

Those are language conventions, however there is a nice typographical convention which, as designers, you’d be better of using in your work. This typographical convention states that, regardless of your nationality, you should use single quotes, and any quotes within quotes should use double quotation marks. This is because it is visually more pleasing to see more smaller glyphs in copy than lots of larger ones. From the excellent, must read Detail in Typography: ‘…the appearance is improved by using the more obtrusive double quotation marks for the less frequent quotations within quotations.’


Don’t use Guillemets (») for direction #

I’m sure everyone’s done it—using Guillemets to denote direction, for example ‘Read more »’. A Guillemet is actually a quote mark (opening or closing depending on the language) and is therefore not really to be used for anything otherwise. Think of a French designer using a ’ for stylistic purposes—it would display ignorance on his part as well as a lack of understanding.


Use proper ellipses (…) #

An ellipsis is a piece of punctuation used to denote ommission or continuation. It is a vey commonly used glyph, however it is very rarely written properly…

Pro-tip: if you can’t be bothered writing … each and every time, and you’re on a PC, just use the Alt Code Alt+0133, then do a find and replace for to ….

An ellipsis is not three full-stops; it is a single entity unto itself which simply looks like three dots. Try highlight the following bracketed items with your cursor: [...] and […]. Notice the difference? Three periods vs. one ellipsis. The HTML entity for an ellipsis is …

So, open up your old documents and do a global find and replace for ... to ….


Line length matters #

An extremely important yet frequently overlooked aspect of setting type on the web is line length, or measure. An overly long measure leads to an awkward and long jump back from the end of one line to the beginning of another. A measure too short makes the eye skip too frequently from ends to beginnings of lines. The optimum line length in legibility terms is 2–3 alphabets, or 52–78 characters with spaces.

Too long:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing.

Just right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing.

With this in mind, you should really find it hard to fill up 1024px of browser real estate, and fluid layouts are a bad idea!


Pay attention to your leading #

Leading rhymes with wedding

Leading is the vertical space between lines of type. The word’s origins lie in the early days of manual typesetting, where typesetters would insert space between lines of type using blocks of lead, hence leading.

As a general rule, your leading should be ≥140% of your font-size. This however varies depending on several factors:

As with all rules, they are bendable—on Type Tips for example my blockquotes have a very small leading. This is purely stylistic, and is not as important as the text is not continuous, long prose. Experiment with different leading in short bursts of type to see what you can achieve, but for body copy, always aim for an amount ≥140%, or, as @monsterthoughts suggests; a ‘lowercase t should fit between the baselines (as a quick measure)’.


Use a baseline grid #

A vertical grid is very simple to adhere to—it constrains content only in the x-axis (left–right). A baseline grid attempts to align content in both the x- and y- axes (left–right/up–down).

A baseline grid simply sets a series of evenly spaced horizontal guides to which the baseline of all type sits. They're not that easy to do, but a few simple rules should see you on your way. If you have a 24px baseline, all your line-heights and margin-bottoms must be in multiples of 24. So a font-size of 16px would need a line-height of 1.5em and a margin-bottom of 24px. This is the baseline that I have used on the redevelopment of Typogridphy.

A baseline grid will improve the vertical rhythm of your type and make reading subtly easier.


Type talks… #

As Oliver Reichenstein wrote, web design is 95% typography. This is so true, yet often forgotten. As the web is a gigantic pool of content, you want your presence to be the most easily accessible there is, and accessible doesn’t just mean working with JavaScript off—it covers a whole lot more than that… Make sure you utilise proper, decent typography to display and present information in the most appropriate and suitable way possible.


Use a grid #

Since pretty much forever, people have been neatly aligning things in grids. From manuscripts to cities, they just work. Grids have been a part of printed design since medieval times, with designers and printers setting and aligning type this way since the early days of the printing press.

An image of part of the 960 Grid System

Aabove: a section of the grid from the 960gs, arguably the most popular and common grid system for the web.

It has been only recently—with several notable exeptions—that designers have started embracing grids for the web, one of the most popular being the 960 Grid System, or 960gs. The 960gs is an incredibly simple yet extremely powerful layout mechanism whereby the content area of a page is divided into 12 or 16 columns, equally sized and spaced within an area of 960px.

Grids don’t only allow you to align your pages correctly, they allow for more neatness in your type—take this page for example, I can hang punctuation or create marginalia with ease, just by having a defined grid.


Bigger is better… #

Okay, not always, but sometimes with type on the web, small is bad… The default font-size in most user agents is 16px—and it’s 16px for a reason…

Actually it’s not that big, once you use it you start thinking ‘Damn. Everything else is small’. Physically 16pt is as big as 11pt in print. Huh? Yes, the screen is usually further away, which at such small distances, has a huge impact.” Oliver Reichenstein

These two posts have to be in my top five of all time.

I was always one to set type at 12px for the web, as 16px to me always looked a little too ridiculous; too big. That was until I saw this post by Wilson Miner: Relative Readability. It is in this article that Wilson cites another amazing article by Oliver Reichenstein, of Information Architects, where it is stated that type on the web should be that big, but not just the type alone, everything around it. Type, for a long time, has been very cluttered on the web—open your layouts up, add more white-space, let things breathe and bring the default font-size back up to 16px. Relatively speaking, that ain’t that big…


Hang punctuation #

Hanging punctuation is one of the nicest little things you can do for your web type. It’s so simple, yet so effective—there really is no reason not to use it! Hanging punctuation is the method of pulling glyphs like opening quote marks out of the vertical flow of the copy. I go a little over-the-top on Type Tips’ hung quotes, so a more scaled back solution follows:

Unhung:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet.”

Hung:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet.”

The difference

As you can see in the first example an odd effect in the whitespace between the bottom of the opening quote mark and the top of the second line is created. A much nicer approach is hanging the opening quote mark as per the second example.

The CSS for this is simply blockquote p{ text-indent:-0.5em; }. Assuming you always use double opening quotes (“) then -0.5em; will generally pull the quote out just the right amount.


Don’t use ‘Arial, Helvetica’ #

If you write your font stacks similar to font-family:Arial, Helvetica, sans-serif; you are making the Helvetica declaration redundant… As Jens Meiert writes: ‘Unless Arial really is your standard font, please use the order helvetica, arial in your CSS font declarations, not the popular arial, helvetica.’

As Arial is installed on pretty much all computers, the Helvetica declaration will never be reached. All machines will use Arial and stop at that. The way around this is to declare font-family:Helvetica, Arial, sans-serif;, however that has problems of its own


Don’t use Helvetica for body copy #

A screenshot of poorly rendered Helvetica on a PC

Whilst Helvetica is most definitely a beautiful font, it is, rather unfortunately, not suitable for setting large amounts of body copy in when it comes to the PC at sizes below 16px.

Type becomes very difficult to read due to poor screen rendering, bad kerning and odd spacing. The above image is a screenshot in which the word clicked distinctly looks like, well, something else altogether…

What the…?

Type Tips was designed, built and authored by Harry Roberts, a 19 year old web developer and type geek.

Harry owns CSS Wizardry and wrote Web Design+ and Quick Tips among other things. He is a passionate advocate of web standards and works at Venturelab in the UK as a web developer

Type Tips is a growing collection of quick and short tips on web typography, to take your web design to the next level typographically.

You should follow me

Tweet this resource…