A LESS Stylesheet Template for Beautiful Typography

Introduction

This tip presents an annotated version of a LESS stylesheet template for making it easier to enable beautiful typography for CSS Web pages. The annotations on this page go a little bit in depth on how fonts are traditionally used in books, as well as explain all the functions used in the LESS stylesheet.

The latest version of this stylesheet can be found at the GitHub Gist page.

The Stylesheet

In most cases, using this stylesheet is as simple as including it and adding the following:

body { .traditionaltypography(); }

To begin, we start with the header and how to use it:

/////////////////////////////////////////////////////////////
//
//   LESS functions for enabling beautiful typography
//   in Web pages.  Written by Peter O., 2013-2015.
//
//   Any copyright is dedicated to the Public Domain.
//   http://creativecommons.org/publicdomain/zero/1.0/
//
//   If you like this, you should donate to Peter O.
//   at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
//
//   In most cases, use the functions ".monospacedtypography()"
//   and ".traditionaltypography()", defined below.  But there
//   are also other useful functions given here.
//
/////////////////////////////////////////////////////////////

The following are helper functions for setting OpenType font features in different browsers.

.fontFeatureSettings3(@v1, @v2, @v3){
  font-feature-settings: @v1, @v2, @v3 !important;
  -moz-font-feature-settings: @v1, @v2, @v3  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3  !important;
  -ms-font-feature-settings: @v1, @v2, @v3 !important;
}
.fontFeatureSettings1(@v1){
  font-feature-settings: @v1 !important;
  -moz-font-feature-settings: @v1 !important;
  -webkit-font-feature-settings: @v1 !important;
  -ms-font-feature-settings: @v1 !important;
}

.fontFeatureSettings4(@v1, @v2, @v3, @v4){
  font-feature-settings: @v1, @v2, @v3, @v4 !important;
  -moz-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -ms-font-feature-settings: @v1, @v2, @v3, @v4 !important;
}

This function includes a rule to use small caps. Originally this was .fontFeatureSettings3("liga" 1, "kern" 1, "smcp" 1);; however, there appears to be no way to enable those font features on a font-by-font basis; if the small cap font features are not supported by a particular font, it won't be shown in small caps unless font-variant: small-caps is used.

// Enables small caps
.smallcaps() {
    font-variant: small-caps;
}

Basic CSS rules for text. It enables antialiasing and legible text rendering, when supported by the browser.

.typographybase(){
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

Function that adds CSS rules for hyphenation.

.hyphens(){
  // Enable hyphenation where supported
  word-wrap: break-word;
  hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
}

Function that disables hyphenation for a CSS element.

.nohyphens(){
  word-wrap: normal;
  hyphens: none;
 -moz-hyphens: none;
 -webkit-hyphens: none;
 -ms-hyphens: none;
}

CSS rules for prose, or flowing text. The only difference between this function and typographytablecell is that old-style figures for numeric digits are used, unlike typographytablecell.

.typography(){
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 1, "pnum" 1,"liga" 1, "kern" 1);
}

.typographytablecell() {
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 0, "pnum" 0,"liga" 1, "kern" 1);
}

This function enables fraction font features. This is used only on portions of the page; enabling it everywhere can lead to undesirable display results in certain fonts that support this feature.

.fractions() {
 .fontFeatureSettings1("frac" 1);
}

Function that disables small capitals for a CSS element.

// Disables small caps
.nosmallcaps() {
  font-variant: normal !important;
  .fontFeatureSettings4("liga" 1, "kern" 1, "smcp" 0,"c2sc" 0);
}

A set of monospaced fonts. I've listed them so that fonts with unique personalities (Menlo, Inconsolata) appear earlier than fonts that come standard in many operating systems (such as Courier New).

Defining three functions for monospaced, sans-serif and serif fonts is done to ease adding additional fonts or changing their priority in the future.

.monospaced(){
    font-family: "Source Code Pro", "Menlo", "Consolas",  
    "Inconsolata", "Liberation Mono", "Lucida Console",
       "DejaVu Sans Mono", "Droid Mono",
       "Free Mono", "Courier New", "Courier", monospace;
}

A set of sans-serif fonts, chosen and ordered using the same philosophy as for monospaced fonts.

.sansserif(){
   font-family: "Helvetica Neue",
       "Open Sans", "Free Sans", "Clear Sans", "Calibri", "Segoe UI",  "Roboto", "DejaVu Sans", Verdana,
       "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

A set of serif fonts, chosen and ordered using the same philosophy as for monospaced fonts.

.serif(){
   font-family: "Sitka Text", "PT Serif",
      "Charis SIL Compact", "Charis SIL",
      "Cambria",
      "Palatino Linotype",
      "Droid Serif", "Free Serif", "Georgia", "Book Antiqua", "Times New Roman", serif;
}

Traditionally, sans-serif fonts are used in captions, headings, and some display text, while serif fonts are used in free-flowing paragraphs. In programming books, monospaced fonts are used in code listings, variable names, object names, and other similar contexts. This is reflected in the following LESS function, traditionaltypography. Most LESS stylesheets that include this template should use this function.

Fraction font features are only used within HTML SPAN elements with the class "fraction". This is because otherwise the fraction formatting would occur in contexts where it is undesirable.

//
//  Traditional font features for Web pages.
//  Uses serif for body text, sans-serif for tables, headers,
//  and other display text, and monospaced for code elements
//  and some input elements.
//
//  Example:
//  body { .traditionaltypography(); }
//
.traditionaltypography(){

Sans serif and tabular figures in table headers.

th {
 .sansserif();
 .typographytablecell();
}

Serif and tabular figures in table cells (though often in books, sans-serif fonts appear in this context instead).

td {
 .serif();
 .typographytablecell();
}

Sans-serif fonts in buttons, most input elements, headings, and captions.

input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption {
 .sansserif();
 .typography();
}

Monospaced fonts for text input, code samples, and object names.

input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
pre, textarea, tt, code, samp, var, kbd {
 .monospaced();
 .typographybase();
}

Serif fonts for free-flowing text.

div, p, li, dt, dd {
 .serif();
 .typography();
}

Don't hyphenate preformatted text.

pre {
 .nohyphens();
}

Fraction formatting if the font supports it.

  span.fraction {
    .fractions();
  }
}

And that concludes the traditionaltypography function.

This specialized LESS function, monospacedtypography, can be used instead of traditionaltypography to use a monospaced font everywhere in the web page, including prose, tables, headings, etc.

//
// Monospaced typography.  Uses a monospaced
// font for all text.
//
//  Example:
//  body { .monospacedtypography(); }
//
.monospacedtypography(){
  td, th {
   .monospaced();
   .typographytablecell();
  }
  div, p, li, input, select, button, option, legend, h1, h2, h3, h4, h5, h6, dt, dd, figcaption, caption,
  td[colspan], th[colspan] {
   .monospaced();
   .typography();
  }
  pre, textarea, tt, code, samp, var, kbd {
   .monospaced();
    .typographybase();
  }
  pre {
   .nohyphens();
  }
  span.fraction {
    .fractions();
  }
}

And that's the end of the annotated stylesheet.

To conclude, this LESS template deals mainly with the choice of fonts, font features and hyphenation, and doesn't deal with font sizes, line height, text alignment, and the like.

Again, for the latest version of this LESS stylesheet, see the GitHub Gist page.