Content

We are going to work with some copy on the great John Baskerville. Familiarising yourself with content is very important when working on the typography. The setting of the text needs to be appropriate for the content and how it will be read.

John Baskerville
Letter Founder & Master Printer

John Baskerville (1706–1775) was an English businessman whose entrepreneurial attentions included japanning and papier-mâché; he is, however, best remembered as a typographer and printer, not least for the design of the eponymous typeface which, to this very day, bears his name.

The Man

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Baskerville was responsible for numerous innovations in printing, paper and ink production. He developed a technique which produced a smoother whiter paper which showcased his strong black type. He also pioneered a completely new style of typography, adding wide margins and generous leading to improve legibility.

“Having been an early admirer of the beauty of letters, I became insensibly desirous of contributing to the perfection of them. I formed to myself ideas of greater accuracy than had yet appeared, and had endeavoured to produce a set of types according to what I conceived to be their true proportion.”

—John Baskerville, preface to Milton, 1758 (Anatomy of a Typeface)

The Typeface

Baskerville is a Transitional serif typeface designed by John Baskerville in 1757, positioned between the Old Style typefaces of William Caslon, and the modern styles of Giambattista Bodoni and Firmin Didot.

The typeface is the result of Baskerville’s intent to improve upon the types of William Caslon. He increased the contrast between thick and thin strokes, making the serifs sharper and more tapered, and shifted the axis of rounded letters to a more vertical position. The curved strokes are more circular in shape, and the characters became more regular. These changes created a greater consistency in size and form.

Baskerville’s work was criticized by jealous competitors and soon fell out of favour. Since the 1920s, however, numerous revivals of Baskerville have been released by Linotype, Monotype, and other type foundries. Emigre released a popular revival of the typeface in 1996 called Mrs Eaves, named for Baskerville’s wife, Sarah Eaves. Baskerville represents the peak of Transitional type face design and bridges the gap between Old Style and Modern type design.

Mrs Eaves

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punchcutter John Baskerville, and is related to contemporary Baskerville typefaces.

Like Baskerville, Mrs Eaves, cut by Zuzana Licko of Emigre, has a near vertical stress, departing from the Old Style model. Identifying characters, similar to Baskerville’s types, are the lowercase g with its open lower counter and swashlike ear. Both the roman and italic uppercase Q have a flowing swashlike tail. The uppercase C has serifs at top and bottom; there is no serif at the apex of the central junction in uppercase W; and the uppercase G has a sharp spur suggesting a vestigial serif.

The content on this page is developed from original copy from Wikipedia and licensed under a Creative Commons Attribution-ShareAlike License, meaning you’re allowed to copy, distribute and transmit the work as long as it is attributed to the original authors.

Macro step 1 — Type choices

I wanted to choose a typeface for the main copy that was in the same vein as Baskerville so it would be appropriate for the copy. TypeTogether’s Athelas was designed for fine book printing and was inspired by British literary classics. It is not too dissimilar from Baskerville and is a bit more robust, making it a better choice for rendering on screen. You may well recognise it as it is included in iBooks.

For headings I wanted to get a geometric sans-serif to contrast the serif in the body copy. I chose Mostardesign’s Sofia Pro as it has a good range of weights, including a Light variant which will work well at display sizes. It is also one of a number of typefaces recently added to Typekit that I’ve been meaning to try out.

Athelas

Waxy and quivering, the jocks fumble pizza.

Sofia Pro

Joaquin Phoenix was gazed by MTV for luck

Macro step 2 — Setting a scale

Modular scales are sequences of numbers based on harmonious proportions. Setting your font-sizes from a modular scale can help to produce text that is overall more ascetically pleasing than just using any old sizes that seem to fit. Also it allows you to maintain a level of discretion by only using a certain number of sizes.

Setting a scale with multiple bases can help to give you enough values to set all the elements of your content with. I recommend using modularscale.com, and setting one base to the paragraph text size that works for the viewport size and another to the large heading size. From here experiment with the ratio to give you a good number of values. Here I have chosen scales with 10 values, I’ll use zeta for body text and alpha for h1’s. I also grabbed a value a few higher up on the scale mega to use, but if you don’t need it you don’t have to.

Your scales will differ over your breakpoints to allow you to appropriately set the font sizes you need depending on the available space. If you can, try resizing the browser on this page to see the differences in my scales.

Mega

Alpha

Beta

Gamma

Delta

Epsilon
Zeta
Eta
Theta
Iota

Macro step 3 — Setting the measure

Once you have all the font-sizes to work with you need to set the measure. The measure is the width that you will used for your content and is also known as line-length. This may be limited by factors such as screen size or available space in a design, but there are key principles you should consider.

Measure should be proportional to the font-size and it’s often easiest to think about it in terms of characters on a line. 45–75 characters per line is typically the recommended amount for printed text. Any shorter and the readers eyes will have to jump back to the start of the next line too often and is tiring. Any longer and the start of the following line can be lost when tracking back. I prefer to recommend something a little longer, around 75–100, for body copy on screen. Often it is a case of using your judgement — if something feels right, it probably is. Have a play depending on the typeface.

On small screens where measure is limited by the space it is better to prioritise the font-size and compromise on the measure. It’s all about a balance, but no-one wants to read sometime that is tiny just because it has a good measure.

Good measure

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Too long measure

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Too short measure

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Macro step 4 — Setting the vertical spacing

Vertical spacing is equally important as horizontal sizing in typography. If lines are too tightly packed together the ascenders/descenders of characters can start to collide and be hard to distinguish. If there is too much space between them they start to feel disjointed and is equally hard to read. The line-height is also affected by the measure. A longer measure will need a little more vertical space to help the eye jump across to the start of the next line. With a shorter measure, you don’t need as much line-height as the eyes can easily jump to the next line.

Setting a vertical rhythm between typographic elements is also a key part of macro typography. The amount of space between say a heading and a paragraph should be less than the amount of space between the precious paragraph and the heading. This is because our minds visually group things that are nearer in what is known as the Gestalt theory of grouping. Headings should be grouped with the paragraphs that come after them, not before them. In this example I have chosen to go for a more typical book style of typography, using indents to denote new paragraphs rather than spacing between them. This felt more appropriate for the content to me.

Good line spacing

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Too loose line spacing

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Too tight line spacing

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Spacing between elements

The typeface is the result of Baskerville’s intent to improve upon the types of William Caslon. He increased the contrast between thick and thin strokes, making the serifs sharper and more tapered, and shifted the axis of rounded letters to a more vertical position. The curved strokes are more circular in shape, and the characters became more regular. These changes created a greater consistency in size and form.

Baskerville’s work was criticized by jealous competitors and soon fell out of favour. Since the 1920s, however, numerous revivals of Baskerville have been released by Linotype, Monotype, and other type foundries. Emigre released a popular revival of the typeface in 1996 called Mrs Eaves, named for Baskerville’s wife, Sarah Eaves. Baskerville represents the peak of Transitional type face design and bridges the gap between Old Style and Modern type design.

Mrs Eaves

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punchcutter John Baskerville, and is related to contemporary Baskerville typefaces.

Micro step 1 — Ligatures

Ligatures are glyphs that are formed up of two or more adjacent characters. They come in several different forms, the most typical of which are common ligatures and discretionary ligatures. Their purpose is to improve readability by removing forms that clash, i.e. the dot on an i and the terminal on an f, or to add extra flourish. These two are distinctly separate, and the latter actually can make text harder to read.

Common ligatures improve readability by removing distractions. As our eyes flick over lines so quickly, any tiny distraction can cause us to loose our place momentarily or just interrupt the flow. Choosing a good typeface for body text that doesn’t have any too distinctive features that may distract people is a great starting place, and anything else we can do, such as enabling ligatures will help minimize visual distractions.

Discretionary ligatures, as you may guess, should be used with discretion. They add flourishes to characters to make them more visually interesting — this can be great for headings or text you want to look extra fancy — but not so good for normal body copy.

Note: OpenType feature support varies in browsers so what you see bellow may not be accurate. For more on the support of web type features take a look at The State of Web Type.

Common & Discretionary Ligatures

Ligatures demo

No ligatures

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punchcutter John Baskerville, and is related to contemporary Baskerville typefaces.

Common ligatures

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punchcutter John Baskerville, and is related to contemporary Baskerville typefaces.

Common & discretionary ligatures

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punchcutter John Baskerville, and is related to contemporary Baskerville typefaces.

Micro step 2 — Numerals

Typically there are four main styles of number characters (also known as numerals or figures). Oldstyle numerals are like lowercase and have a baseline that ranges up and down. These are good to use within paragraphs as they blend in with the rest of the text. Lining numerals are like uppercase and are each the same height with a fixed baseline. These work well alongside all-caps and in headings where you may want them to stand out.

There are also two width variations of each — proportional & tabular. Proportional numerals take up as much width as they need, as typical characters do. Tabular numerals act more like a monospaced font and each have the same width. Tabular figures are useful for tables where the information is more easily digestible when all the numbers align.

One of these four will be the default used in the font and the others can be used by enabling them with OpenType features.

Oldstyle proportional numerals

Oldstyle proportional numerals demo

Oldstyle tabular numerals

Oldstyle tabular numerals demo

Lining proportional numerals

Lining proportional numerals demo

Lining tabular numerals

Lining tabular numerals demo

Micro step 3 — Punctuation

Using the correct punctuation plays a big part in micro typography. It can really make or break your overall typography and the key is consistency. Punctuation is often based on a house style, but there are a few basic rules that are generally followed.

There are many different types of dashes, but let’s focus on the main three — Hyphens, endashes, and emdashes. Hyphens are used to join words or to separate syllables of a single word. The hyphen key on a keyboard will actually give you a slightly different character — a hyphen-minus — but these are widely accepted as hyphens, especially on the web. Endashes are used to show a relationship between two things, or to show a range of numbers. Emdashes are used to separate off information (similarly to the way parentheses are used). They can be used with spaces either side, thin spaces either side or no spaces. In some editorial styles endashes are used instead of emdashes.

Quote marks are often used incorrectly as the default characters on a keyboard will give you straight quotes. The ‘curly’ quote marks are the right ones to use and an often used style is to have double quote marks for quoted text and single quote marks used within if any text needs to be highlighted (or the quote contains another quote).

Hanging punctuation is another nicety that can be a little tricky to achieve on the web. By dropping any punctuation at the start of a line back a bit we can keep all the text aligned to the left edge, which helps keep the paragraph shape and makes it easier to read. This is something to look at doing in blockquotes where it can be controlled, but is still a bit too complicated to implement elsewhere.

Hyphen

The part-time sous-chef was top-notch.

Endash

16–18 March 2015

Emdash

Josephine — and her French Bulldog — was always welcome.

Quote marks

“Let’s not use the word ‘hipster’ anymore”

Hanging punctuation

Having been an early admirer of the beauty of letters, I became insensibly desirous of contributing to the perfection of them. I formed to myself ideas of greater accuracy than had yet appeared, and had endeavoured to produce a set of types according to what I conceived to be their true proportion.

John Baskerville, preface to Milton, 1758 (Anatomy of a Typeface)