Typography of My Website

I’m a typophile. But this is nothing for a self-help group because it means to love typography. It was clear to me from the start that I would start with typography for my new website.

Normally, designers pay attention to typography, to the rest of the people typography is unimportant. But typography influences each of us, consciously and subconsciously.

Readability or contrast decides whether the message of a text reaches the reader at all. And since words have incredible power, typography is underestimated.

The right choice of font, font size, weight, layout, sentence width, lead, letter spacing, or many other things unconsciously affects the reader and thus transports the statement. Proper typography can support and reinforce a message that makes the wrong message even meaningless or ridiculous.

I’ve always found typography fascinating, but after reading the book The Elements of Typographic Style by Robert Bringhurst I studied the matter more deeply. There is a Web-adapted version of his book on the website The Elements of Typographic Style Applied to the Web.

The Elements of Typographic Style

Typography

Selecting good typography does not only mean selecting a scripture but is an art form that I am far from mastering.

It is important to choose the right page layout, the right sentence width, the correct lead, the right combination of fonts, the right scale, the correct font size, and a variety of other guidelines.

Scale

Several years ago, I stumbled on two interesting lectures by Tim Brown on typography. Tim Brown works as Type Manager for Adobe Typekit, a platform that offers Web font hosting. In his lectures, he offers a fascinating insight into the history of typography and how to achieve good typography.

I started with the selection of a scale. A typographic scale is the selection of harmonic proportions, which are then applied to font size, sentence width, and other parts.

The most famous proportion is the Golden Ratio, which has a ratio of 1:1.618. But many other proportions have their origins in geometry, music, nature, or history. Tim Brown has even created the website Modular Scale, on which a scale can be calculated.

However, this was not necessary for my project because Team-Sass offers a SASS extension.

So, I add the gem to my Gemfile first:

Gemfile

source "https://rubygems.org"

group :development do
  gem 'modular-scale'
end

Then I load the Compass plugin in config.rb:

config.rb

# Require any additional compass plugins here.
require 'modular-scale'

Afterward, the module of Compass has to be loaded in a partial:

helpers/_imports.scss

@import "compass";
@import "compass/reset";
@import "modular-scale";

I’ve decided to use the golden ratio and then select the ideal text size and an important number:

$ms-base: 16px 18px;
$ms-ratio: $golden;

Now the helpers of Gems can be used everywhere in the SCSS. Instead of writing somewhere manually 42px (41.887px) or 2.618em, I write modular-scale(4) to choose the fourth value of the scale:

$font-scale-h1: modular-scale(4);

Sentence Width

I could have started to choose the sentence width (line length), and then choose the grid appropriately. However, now that a scale has been selected, you can use it for the correct sentence width.

A responsive website with fluid line length is not an optimal prerequisite for a fixed sentence width. All sorts of values are circulating on the Internet, which is an optimal line length. All sorts of truisms such as no less than 45 characters, no more than 85 characters, or similar values can be found there. But nothing is scientifically proven, and one should measure in words rather than in characters because we see word images and not letters.

If the line is too long, the eyes are tired and the readers may lose the connection to the next line, if the line is too short, the constant interruption of the reading flow will be equally severe. There is one thing to say: The correct line length does not exist, it depends on the font, typesetting, and line spacing.

I tried to determine the optimal line length of my website with about 66 characters or about 10 words. Depending on the browser size, the line length then shrinks up to a threshold that I have selected. If this falls below, I select a different number of columns of the grid.

But I make sure that the line length is not wider than I determined to be optimal because as soon as the head has to be moved, the line is too long.

Vertical Rhythm

Next, I set the line spacing and decided in addition to the technique of vertical rhythm. In the case of fonts of different sizes, the line spacing is mathematically changed in such a way that two different-sized fonts would be visually adjacent to each other.

Convenient is that the annoying mathematics behind the formula (which spits out crooked values with many decimal places) does not have to be calculated by yourself. Compass comes with a module for it.

There are some variables to be set:

$base-font-size: modular-scale(1); // 18px
$base-line-height-count: 1.5;
$base-line-height: $base-font-size * $base-line-height-count; // 27px
$relative-font-sizing: true; // use em and not px
$round-to-nearest-half-line: true; // prevent too big gaps between lines

A simple call to this mixin activates the vertical rhythm:

@include establish-baseline();

To adjust the font size, you do not use absolute values anymore, but a mixin. This can be used with the Mixin of Modular Scale:

h1 {
  @include adjust-font-size-to(modular-scale(6));
  @include trailer(1, modular-scale(6), margin);
}

You no longer directly define the distances above or below an element, but use mixins, as in the example trailer.

Fonts

I had the most problems choosing the font, as this is a difficult task. There are tons of fonts, but finding the right one for the occasion is a big hassle. To make matters worse, there are far more bad fonts on the Internet than good fonts.

Creating a font is an immense effort and therefore a license for a font step also costs a lot of money. But to use web typography, the designer of a font must release it for embedding in a website. Beautiful, free fonts are available, for example on The League of Movable Type.

In addition to owning the font, there is the possibility to integrate the font of a web service. There are for example pay-as-you-go solutions such as Adobe Typekit, which offer many professional fonts. Anyone unwilling to regularly pay to use a font can still choose from many fonts that have been freely made available by nice designers.

I first looked at Typekit, but then chose two free fonts that I integrate into my website via Google Fonts:

  • Gentium Basic for long-running texts
  • Yanone Kaffeesatz for headlines and shorter texts, as on the homepage

Gentian Basic is an appealing typeface with serifs and an italic typeface, while Yanone Kaffeesatz is a sans serif typeface. Both fonts in combination offer a harmonious picture.

Font Size

On November 17, 2006, Oliver Reichenstein wrote on the Blog of Information Architects about the 100% Easy-2-Read Standard, this concept was new to me. At that time, the font on websites was consistently set too small. The browser standard has always been 16px. But many pages use values between 10 and 12 pixels.

After this blog post, designers started to increase the base font size. I even use 18px for my floating text font.

Font Weight

I load Gentium Basic in 400 and 700 and Yanone Kaffeesatz in 200 and 400. I can put bold parts of the body text in 700 and the rest in 400. On the homepage, I use Yanone Kaffeesatz. For high-resolution displays (Retina) I use a font width of 200, for all other displays 400.

Tracking, Widows and Orphans

Tracking, the inserting of spaces between individual letters, I use on my website in a few places and Kerning, reducing the spacing between individual letters, not at all. Manual kerning on the Internet is a time-consuming task. There are JavaScript solutions, but the whole thing is not worth the effort or load size on the web.

To prevent a single word from being alone on a new line, I have been using JavaScript for a while. Since this jQuery plugin did not work reliably in cases and had a large file size, I removed it after a few weeks.

Other Typographic Formatting

I use more typographic formatting, such as centered verse blocks, and correct quotation marks for inline citations depending on the language. I’ve written myself a Jekyll plugin that ensures that e.g., 1000 €, or 5 + 3 are provided with invisible spaces so that everything slips as a block in a new line and not character by character.

For those who have become curious about typography, I have put together a small list of recommended links to this topic: