From Print to Web: Creating Print-Quality Typography in the Browser

From Print to Web: Creating Print-Quality Typography in the Browser

Print, in the past forty years, has gone almost completely digital. While most of us still sit down with a pen and paper to sketch our ideas and flesh out layout mechanics, we design our spreads and set our type on the computer. Through tools such as InDesign and (once upon a time) Quark, layout, kerning, color – everything, really – has been made incredibly easy once you understand the tools.

From Print to Web: Creating Print-Quality Typography in the Browser

Yet, little by the way of setting print-quality type is discussed on the web. While our toolset is still very young and, dare I say, immature, there is a lot we can do to create delectable, readable typography with just HTML, CSS, and perhaps a little JavaScript.

The Key Parts

While it’s possible to write an entire book on print typography and how it can be brought to the web (in fact, it has been done, in part), there are a few select parts we will focus on in this article:

  • Typesetting: what do we have to work with?
  • Sticking to a baseline to achieve vertical rhythm.
  • Kerning.

What do We Have to Work With?

Let’s work from what we know is possible in print. Above is the majority of typesetting tools provided to us in Adobe InDesign CS4; a vast array of things to tweak and (carefully) adjust.

inDesign Palette

Below, each feature from the InDesign palettes has been mapped to a feature of CSS (or an augment in JavaScript).

Feature CSS-equivalent Rule(s) Browser Support Notes and Exceptions
Type family

font-family: [primary][, secondary][, …];

@font-face ruleset

All
Font

font-family: [primary][, secondary][, …];

font-style: [normal|italic];

font-weight: [100-900|normal|bold|bolder|lighter|inherit];

All
Font size font-size: n[px|em|ex|rem|…]; All
Leading line-height: [n|n[px|em|ex|rem|…]] All
Kerning No CSS equivalent; augment with Kerning.js or Lettering.js Both Kerning.js and Lettering.js work in all modern browsers. These libraries should not be used on body copy.
Tracking letter-spacing: n[px|em|ex|rem|…]; All
Vertical scale -[webkit|moz|o|ms]-transform: scaleY(n[px|em|ex|rem|…]);

Chrome, Safari, Firefox, IE10 Scaling type is generally not recommended. Use scale3d for hardware acceleration (not yet available in Firefox).
Horizontal scale -[webkit|moz|o|ms]-transform: scaleX(n[px|em|ex|rem|…]);

Chrome, Safari, Firefox, IE10 Scaling type is generally not recommended. Use scale3d for hardware acceleration (not yet available in Firefox).
Baseline shift No CSS equivalent; Wrap text in <span></span> and apply margin-top: -n[px|em|ex|rem|…]; All Alternatively, Kerning.js or Lettering.js can handle this in headers.
Skew (false italic) -[webkit|moz|o|ms]-transform: skewX(ndeg); Chrome, Safari, Firefox, IE10 Generally not recommended. Use real italics.
Alignment text-align: [left|center|right]; All
Justification

text-align: justify;

text-justify: [auto|inter-word|inter-ideograph|inter-cluster|distribute|none];

text-align: All; text-justify: IE only. There is no way to do “[left|center|right] justify,” except in IE.
Paragraph indent padding-left: n[px|em|ex|rem|…]; All
First-line indent text-indent: n[px|em|ex|rem|…]; All
Space before/after [padding|margin]-[top|bottom]: n[px|em|ex|rem|…]; All
Drop cap *:first-letter pseudo selector Chrome, Safari, Firefox, Opera, IE8+ This only works for the first letter of the paragraph.
Drop cap (number of characters) No CSS equivalent for 2+ characters; augment with <span></span> and apply float: left; All
Text wrapping

float: [left|right]; and

white-space: [pre|pre-wrap|pre-line|…]

No current CSS-only solution for complex shapes; augment with CSS Text Wrapper.

float: All; white-space: Chrome, Safari, Firefox, Opera, IE8+ Multiple rules required for white-space.
Optical margins No CSS equivalent; no augment; hang opening quotes with text-indent None Alternatively, Kerning.js or Lettering.js can handle this in (very) short copy or headers.
Ligatures text-rendering: optimizeLegibility;

Firefox, Safari, Chrome This is a non-standard rule and has a few “gotchas,” such as automatically being applied on copy larger than 20px in Firefox, doing nothing at all on OS X, breaking small-caps, and causing weird rendering issues on Linux.
Underline text-decoration: underline; All
Strikethrough text-decoration: line-through; All
Hyphenation

white-space: [pre|pre-wrap|pre-line|…]

word-wrap: break-word;

&shy; (soft hyphen)

white-space: Chrome, Safari, Firefox, Opera, IE8+; word-wrap: IE only.

There is no way to automatically control where hyphens appear, though those features will be available in the future.

Multiple rules required.

Orphans and widows No CSS equivalent; augment with a jQuery “widon’t” snippet. None
Other notes:

  • rem units are not supported by IE ≤ 9 and Opera.

Not bad! We can do most of what InDesign offers print designers, and while we lack some of the more fine-grained control, we can augment it to an extent.

However, having the tools to set the type itself is only one part of the story. What about aligning the content on a consistent baseline grid?

Vertical Rhythm

“Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.” — The Elements of Typographic Style (3.1), p36

And with that, Robert Bringhurst sets the tone for finding a vertical rhythm. In print, this is easy, as you just set your baseline grid and follow that with your leading throughout. If you set 11/13 (11pt type with a 13pt leading), then everything must be set in proportion to the 13pts. If you have a 26pt header, you may use a 26pt (2 x 13pt) or 39pt (3 x 13pt) leading to keep the baseline steady.

While this is more difficult on the web given dynamic images and content, browser sizes, and rendering differences, we can come pretty close to a consistent baseline grid.

Hugrid
Hugrid

I highly recommend using a JavaScript baseline grid tool, such as the handy Heads-Up Grid. The Heads-Up Grid overlays an easily configured grid over your page, which you can toggle on and off as you work. It’s unobtrusive and allows you to easily set margins, a baseline grid, and columns.

pageUnits = 'px';
colUnits = 'px';
pagewidth = 600;
columns = 3;
columnwidth = 180;
gutterwidth = 20;
pagetopmargin = 20;
rowheight = 22; // This is our baseline grid height, in px

Once we have established a baseline grid, we want every element on our page to follow this grid. That means all paragraphs, images, and headers should fit into the grid proportionally.

Let’s say we have a header, two paragraphs, and an image:

Misaligned Page

Right now, we haven’t styled the content and don’t conform to the 22px baseline grid we defined. To do this, we’ll need to use a combination of line-height and margins.

h1 {
    font-size: 32px;
    line-height: 44px; /* 44px = 22px x 2 */
    padding: 0;
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}

img {
    height: 398px;
    /* Since our image is only 398px tall, but 398 isn’t a multiple of 22,
     * we need to add margins to conform to the baseline. 22 * 19 = 418, so we’ll
     * add 10px to the top and bottom. It doesn’t matter whether we split the
     * margins on top/bottom, as long as it adds up to 8px.
     */
    margin: 10px 0;
}

That will give us a nice, clean result with the content residing within our baseline grid. (It’s easiest to aim to be within, not on, the baseline grid. You can aim to perfect this, but it isn’t necessarily worth the time.)

Aligned Page

The trick is to maintain padding, line-heights, and margins in a proportion of 22px (our baseline grid height) everywhere in the document. However, it doesn’t necessarily need to be the case on every single element, as long as adjacent elements, together, fit the grid.

Kerning

It’s been possible to track type in CSS for ages using the “letter-spacing” rule. Unfortunately, there has been no way to tweak the spacing just between pairs of letters, also known as “kerning,” in CSS.

While good fonts often contain their own kerning rules, many fonts are poorly kerned and many display (headline) faces do not contain any rules. This leaves it up to the designer to modify the spacing to his/her liking and to create an evenness between the letters. It is, essentially, a vital detail of design that has long been overlooked on the web.

On the upside, some JavaScript libraries have been created to help augment the lack of word- and letter-level typographic control: Kerning.js and Lettering.js (disclosure: I created Kerning.js). Both of these tools are incredibly easy to apply to your own content and are completely unobtrusive (so if they fail to work or load, your content will be okay).

On the downside, these libraries can really only be used on ‘large’ type: headers and short blurbs. Using them on body copy would be absolutely disastrous, as they break letters and words down into individual DOM elements to allow styling.

Lettering.js
Lettering.js

First up is Lettering.js, which gives you letter-level control through CSS selectors.

It’s very easy to apply:

$(document).ready(function() {
    $(".some_headline").lettering();
});

This code will break your content down into individual span elements, with classes applied to each, allowing you to style each letter individually:

<h1 class="some_headline">
	<span class="char1">Y</span>
	<span class="char2">o</span>
	<span class="char3">u</span>
	<span class="char4">r</span>
	<span class="char5"></span>
	<span class="char6">T</span>
	<span class="char7">e</span>
	<span class="char8">x</span>
	<span class="char9">t</span>
</h1>

To kern text, you then simply adjust the margins:

.some_headline .char1 {
    margin-right: -2px;
}

.some_headline .char3 {
    margin-right: -1px;
}

This is great, especially if you intend on applying a number of different styles and transforms to each individual letter.

On the downside, you can end up with a lot of extra CSS, especially if you intend on kerning each letter. Additionally, this only works well if you know your content; you cannot apply general rules (like always kerning certain letter pairs) to Lettering.js-ed content.

That is where the most powerful (and slightly more complex) library, Kerning.js, comes in.

Kerning.js
Kerning.js

Kerning.js creates several all new CSS rules that allow you to style content automatically and dynamically.

If we take the same .some_headline example we used with Lettering.js, we can kern the type in two ways.

The first method is very similar to Lettering.js‘ style:

.some_headline {
	-letter-kern: -2px _ -1px;
}

Here, we use just one rule to specify that we would like to kern the first and third character (as in the original example). The JavaScript library will automatically read this rule and apply it to your content.

Alternatively, if we would always like to kern the “Yo” and “ur” letter pairs, we can create a rule for that:

.some_headline {
	-letter-kern: -letter-pairs(
		'Yo': -2px,
		'ur': -1px
	);
}

Now every time we use the .some_headline selector in our page, ‘Yo’ and ‘ur’ will automatically be kerned, whether the text is “Your Text,” “Oh, You Sure?” or anything else.

Other Type Assistants

It doesn’t fit into any of the sections mentioned above, but I also wanted to mention FitText.js, another JavaScript library that allows for automatic, responsive text resizing.

Fittext.js
Fittext.js

This means that your font-size will be automatically adjusted as you resize your browser (or view your site on a different device).

To use FitText.js, all you need to do is apply it to the content you would like automatically resized:

<script src="jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

As you resize the browser, your content’s font-size will be automatically adjusted. There are also more options, available in the documentation, that let you control how aggressively the content is adjusted.

Conclusion

While far from complete, there is a vast typesetting toolset available for us in CSS. With some extra effort and a few JavaScript-based fixes, there is no excuse to not create print-quality typography on the web.

CSS will eventually be at parity with print; but right now, we’re pretty close.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.