Part 1: We Need to Talk About Line Height
Getting line spacing right is one of those aspects of typesetting that is a tricky combination of good judgement and practiced technique, making it both an art and a science.
Line spacing is a complex topic, and one that often demands whole chapters in traditional typography manuals. Typesetting for the web brings additional complications. We will need to look at the metrics built into every font (that’s the science) as well as establish some robust guidelines for judging space that will change depending on typeface, use, context and intention (that’s the art).
We’ll begin with some definitions
In CSS, the line-height property refers to the distance from one baseline to the next. It uses measurements that are built into the font, and variously interpreted depending on the particular combination of browser and operating system, to set the “correct” amount of space. Ideally, this distance will have been well-configured by the font’s designer.
For the purposes of this article, we are interested in the complete distance between each baseline in a paragraph of text, which we will call “Line-Height”. “Line Gap” refers to the space between the lowest descender of one line and the tallest ascender of the next.
A look at the metrics
To describe the measurements involved in line spacing, we have to start with the em, a unit of measurement used as the scale for the font size. Whenever a font-size is specified in some CSS units (absolute or relative), it is always the font’s em that is scaled to that specified size. It is the font’s designer who decides what the size of all the font’s glyphs will be in relation to the em. Therefore, the actual size of the glyphs (letters, digits etc.) from one font set at a particular font size may be quite different from the size of those glyphs from a different font. However, a widespread and useful convention among major font vendors is such that the height of the uppercase Latin letters (such as E or H) is typically somewhere around 70% of the em. This means that if text is set at font-size: 20px, the actual height of the letter H will often be around 14 pixels. (But if the font foundry chose not to adhere to that convention, the height may be much larger or much smaller.)
The x-height, another common attribute used to describe a font’s proportions, is even more of a relative measure — depending on the typographic style of the typeface, the actual size of the lowercase glyphs in relation to the the uppercase letters (and to the em) varies heavily from font to font.
In short: the CSS font-size specifies the size to which the font’s em will be scaled, and the actual height of the glyphs in relation to the em varies from font to font.
The font’s designer will state a preferred distance from one baseline to the next as part of the font’s layout metrics. This information isn’t generally visible to the user, but it is easily overridden by using the CSS property line-height.
No negative line-height
A true negative Line-Height is impossible, since this would result in the second line of text rendering above the first and outside of the content box. Relative to font size, a Line-Height of anything less than 100% will result in a measurement smaller than the em. At 0% each new line of text will render on top of the previous one.
So what’s the default behavior?
By default, and unless instructed otherwise, Line-Height is calculated by the browser using the metric information built into the font by the designer, but the way this is implemented varies depending on the user’s browser and operating system. Briefly, and in broad general terms, some browsers (generally those on a Mac) take the specified Line Gap measure and add it to the bottom of the em height. Other, typically Windows-based, browsers split Line Gap and add 50% above the em and 50% below. (We’ve written an in-depth technical explanation for those of you who are interested!)
Left: Mac OS adds the Line Gap measure underneath the descender.
Right: Windows splits Line Gap and adds 50% above the line, and 50% below
In desktop publishing and word processing software (both of which take their aesthetic cues from mechanical typesetting), the general rule of thumb for Line-Height is 120% of the em height, so if font-size is 20px the overall distance between baselines would be 24px.
When should we not use the default?
All-caps settings. There are occasions outside of legal documents when an all-caps setting is an appropriate design strategy. A line of capitals will not have any descenders, yet the space for them is still accounted for in the Line-Height. In these cases, specify a Line-Height calculation that results in a number smaller than the em (eg. 0.7em or 70%), effectively removing that surplus white space.
Fonts with an unusually large or small x-height. A typeface with either a large or small x-height will probably require a departure from the default or typical 120% Line-Height. A large x-height demands more white space between the lines of text, while characters with very tall ascenders will require much less and maybe even none.
When there are lots of diacritics. If you’re working in a language that uses lots of diacritics (especially on the capitals), then allow for more than the regulation extra 20%. If your site will be translated into several languages, then think about defining different CSS classes for each script.
Mixing different typefaces within a line of text. The most common example of this is using a monospaced font to set code extracts within a line of regular text. Take care to pick a monospaced font that visually and metrically complements the text font; if its glyphs are larger than the text font, then the browser will set line height using the taller glyphs, creating an unpredictable and uneven result. (Alternatively, you could define a smaller font-size for typically monospaced HTML elements like
Calligraphy, natural-media and handwriting fonts. The typographic rules are much murkier in this category, particularly with handwriting fonts — some clashing of letters may actually look more authentic. Calligraphic fonts may have a few characters with enormous swashes that make the rest of the font look tiny in relation to the em box, even if you never use the swash characters.
Using CSS to control line spacing
In the event of any of these scenarios, the best way to override a font’s built-in settings and manipulate vertical spacing is to use the CSS property
The line-height property is one of the few CSS properties that don’t need a unit; therefore,
line-height: 1.5; is the same thing as
150%. Never use an absolute method to specify Line-Height, such as “px”. If the user changes the font size using their browser settings, or you specify a different font size for the same element later in the CSS, then your lines of text may end up sitting on top of one another.
Troubleshooting line spacing
If your text layout is behaving in unexpected ways, our web font kit builder offers several options for correcting or overriding the font’s built-in metrics, but remember often the easiest way is simply to use a percentage method in the CSS.
“Best” In most cases the foundry should have done a good job specifying a line gap, but if you think something looks wrong, try our “Best” setting, which will respect the foundry’s specified spacing but iron out some potential quirks in the font.
“Boundary box” sets the line gap to zero by constraining line height to the bounding box formed by the glyphs with the tallest ascender and lowest descenders. Useful for dingbat or icon fonts and some all-caps fonts.
“Native” respects the foundry’s preference over browser- or OS-default.
Try “Automatic” if you tried “Best” and found the line height too large.
“120%” is the same as specifying “line-height: 1.2” in CSS, and imitates the default line spacing used by desktop publishing programs such as Adobe InDesign.
By default, our kits use the “Best” method, which is the most fool-proof option available.Back...
Posted 26 Jan, 2012 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
Defining a CSS font family
In this article we're going to be digging into the composition of the CSS Font Family and how…
A CSS Webfont Logotype
A pure text logotype, wordmark or masthead is now very achievable using HTML and CSS in combination…
Getting Started with Font Stacks
A font stack is the instruction in a page of CSS code that tells a browser what fonts to display,…