Web typography - just a little bit longer

css
ergonomy
design
Tags: #<Tag:0x00007f389dab8510> #<Tag:0x00007f389dab8358> #<Tag:0x00007f389dab81a0>

#1

I am by no means a web designer. If you are reading this with a web browser, you can see that. The following article focuses on readability improvements, via the means of CSS.

tl;dr: modern browsers aren’t perfect yet. Not for rendering fronts, and not for typesetting.


Typography - learning by doing. Look, feel, adjust.

I personally like my new typography. - I think the text is much more readable now, although the the font (Helvetica) could be clearer.

In the following I want to summarize how and why I changed the style (CSS) of my websites. I’d be happy for feedback.

I limit what I do to CSS, because that’s the relevant way of applying typographic alignments in the WWW. There are some Javascript hacks, which I ignore for now.

I read some of the articles on Practical Typography and skipped the parts where the designer wants to sell his fonts.
Personally I want that everyone can apply and learn from these approaches. I get that everyone needs to pay bills. - And that there is a difference between a professional typography design and my style. There are many ways to do it. But this one in mine.

Font - is it web safe?

For web publishing there is the limitation, that you either need to reliably distribute the font to the client, or you need to use a so called web-safe font.

If you are like me, you don’t understand why your system needs 100s of fonts. Many of them appear to be useless. But even Comic Sans has fans.

Helvetica is a safe and traditional choice. It’s used by Discourse (the software I use to host my web stuff) by default. It’s very popular. People like it. Fair enough.

I use:

font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",
Helvetica,Arial,"Lucida Grande",sans-serif !important;

Some people have this variant of Helvetica ($) installed, which renders a little less round. - Minor differences only.

This typeface, designed by Max Miedinger and other project members at the Haas’sche Schriftgiesserei, has become one of the most famous and popular typefaces in the world

-But this font is not freely available. The differences are so minor, that most people probably wouldn’t even see it.

I think for ergonomic reasons websites like mine should only use one text font. The same rule of thumb applies to most UIs. I leave it to professionals to decide which fonts work well with each other.

Font size >= 14 = good

In the browser dev tools you can see that the font size is font-size: 15px; by default. The font size needs to be aligned with the column-width for paragraphs, so that the amount of words per line of text isn’t overwhelming. This is supposed to help the reader to remain focused.

I think that is true. Especially technical articles can benefit from readability enhancements. The more complex the content, the more important the readability. So I am giving this a try.

Back in the days, when I was 14, I used small coding fonts. It looked great and intriguing on the screens. Black and green. Old school. - Maybe it’s due to the high-DPI displays nowadays, maybe it’s because of me hitting my early 30ies, but today I use larger fonts.

The font size itself may already be a great improvement for general readability. That being said, there is more we can do! It’s 2017. Let’s take a look at these nice settings:

letter-spacing: 0.115em !important;
font-kerning: normal;
font-weight: 500;
line-height: 19px;

The letter-spacing is a value, that is unique per font. In the summary of the typography rules it says we should use 120–145% of the point size. I decided to go for 115em; about 115%. - As we know, 5 gets rounded up. Math!

Font kerning is well explained here. For text (not code) this is very useful. Many fonts have kerning definitions to adjust the letter spacing depending on the letter combinations. This is not the same as letter-spacing, because kerning applies relatively, and only based on the definitions of the font.

The font-weight defines how thick the letters will be rendered. This is font specific. Actually I wanted 550, but browsers aren’t good layout programs. It can be set in steps of 100s only.

Using linear font gradients to emphasize on lower lines per paragraph

So I came up with a _typography hack_ that is worth mentioning. It is Webkit only, and an experiment:
background: -webkit-linear-gradient(#292424, black);
-webkit-background-clip: text !important; 

This adjusts the color density of the black linearly per paragraph, for Chrome (and other Webkit browsers). The letters look stronger at the end of the paragraph. That is intended: the idea is to lead the eye of the reader downwards. But of course this needs to be used carefully.

Result of this experiment: don’t do this.

Line height

Last but not least I adjusted the line-height, the vertical distance between lines of text. I just like 19px. Usually it should be between 120% and 145%. - Wider than this.

For text paragraphs

Take a look at this:

text-rendering: optimizeLegibility;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

Browsers can make fonts smoother. This affects the font-weight, depending on the anti-aliasing. IE, Chrome, FF etc. all do it differently. There can be surprises.

The legibility setting is okay for the chosen front for modern browsers. In the past there have been bugs, which caused surprises on mobile devices for example. I chose a different text-rendering legibility for headings, because I want them to stand out.

Note that this is probably not the fastest way to render fonts. I believe that browsers don’t set the legibility optimization by default, because they get compared by for their rendering speed. For end users, who mostly use them as readers or video players, that actually doesn’t matter.

A mono-spaced font for code listings needs to be rendered differently

I load a Truetype font via CSS, as I wrote here:

@font-face {
    font-family: "PxPlus VGA Square Px";
    src: url("/uploads/default/original/1X/698e427dae31f4bd85986e3f2beb0bbfff502e9f.ttf") format('truetype');
}

That works for all browsers I care about. And… for those I don’t care about there is a fallback.

font-family: "PxPlus VGA Square Px",
Consolas,Menlo,Monaco,"Courier New" !important;

Apart from some workarounds, due to the weird mono-space font I chose, here is what I applied:

code, pre {
    font-family: "PxPlus VGA Square Px",Consolas,Menlo,Monaco,"Courier New" !important; !important;
    font-size: 22px !important;
    text-rendering: optimizeLegibility !important;
    font-smooth: never;
    -webkit-font-smoothing : none;
    font-kerning: none !important;
    letter-spacing: 0.06em !important; 
    font-kerning: none;
}

Since this is a pixel-perfect DOS era replica font, we don’t need smoothing. It doesn’t work for this one.

The large size setting is due to the resolution differences. Back in the days, 90ies, the CRT computer screens had resolutions of 1024x768; maximally. Or even less. There was a time when I was looking at a Monochrome monitor. When I was… 5. But there was such a time. Fonts change, that is my point.

A mono-spaced font - per definition - does no kerning. I adjusted the static letter spacing to perfectly fit the web site. I don’t use PxPlus VGA Square Px as my main coding font. But certain popular terminals are even worse than web browsers, when it comes to font rendering. Which actually is their primary job.

Rendering of mathematical expressions

I wrote about that here. For mathematical font rendering I use Neo Euler (in MathJax). A Fourier transformation looks like this:

The Fourier transformation is important in Electrical Engineering and Computer Science $\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\ e^{- 2\pi i x \xi},dx$ . - Because of its many practical applications. The applications include Digital Signal Processing as well as image processing.

It doesn’t take too much space. - We all know that Euler was a genius. Using a font with his name is a must.

p.s.
This bug is fixed in this fork of Discourse’s MathJax plugin.

Text justification - IE has the most sophisticated features

Browsers aren’t layout software… but IE does a good job. That is very surprising. I always thought IE was the worst browser. I read that for Arabic typography IE is the only browser, that supports Kashidas.

text-align: justify;
/* text-justify: kashida; */
text-justify: newspaper;
hyphens: auto;

Although all browsers I care about support basic text-justification, IE supports advanced algorithms. The newspaper justification looks best. I read that it’s a CSS4 draft.

Webkit based browsers do not support hyphenation in CSS. FF and IE do support this. - Again, this is surprising. I thought Chrome / Webkit was the best engine. This blows! I don’t understand why we cannot have hyphenation (without JS) in 2017. Sure, no one cares about readability… of what… billions of lines of text every day?!

Text indents - just followed the recommendation

I applied a CSS property (text-indent: 3px;), which very slightly indents at the first line of each <p>'aragraph element. Mostly because it was recommended.
I think it helps the readability a little.

Look and feel - numbers and the font variants

Here are some look and feel settings I chose.

font-variant-ligatures: historical-ligatures;
font-feature-settings: "hist";
font-variant-numeric: proportional-nums;
font-variant-numeric: ordinal;
font-variant-numeric: oldstyle-nums;   
font-variant-caps: titling-caps;

I want that numbers get displayed, so that they can be distinguished from text. Like 0x90 or 0xFFF. This looks better. For text-paragraphs with numbers (decimal and hexadecimal notations).

Handing headings, anchors and tags

I chose to have anchors (links) and buttons in small caps, but I want that CSS transforms this. I am not going to type in caps. And CSS does this well:

font-variant-caps: titling-caps;
font-feature-settings: "c2sc", "smcp";

I was thinking of doing the same to headings, but decided against that. The reason is, that I think that headings belong to the text. I want that a reader can pay extra attention to links and buttons. If you click them, there will be an event. Typography can help users to anticipate this.

Headings are special - let them be

I have changed some of the values to adjust the headings to stand out. The font rendering is geometrically precise and not optimized for legibility, which is to support this as well. Slightly.

Avoid to mess with quotation characters for techical essays

I don’t mess with the quotes, because it messes with code if you copy & paste.

Quotation marks are regionally different. French often use Guillemets (»Bonjour«), Germans use Gansefüßchen („Moin“). Americans usually don’t know that, and assume everyone needs to use to "s, like “Hi”.

LaTeX does this correctly if you chose the right classes.

In short: don’t mess with quotes on the web for tech articles.

Drop caps

Drop caps (and letter illuminations) are a nice gesture to fascinate the reader’s attention. Especially if the paragraphs are meaningful. If there is a drop cap, you might stop scrolling over it. Accidentally.

CSS3 has a selector for the first letter of a paragraph (p::first-letter). I don’t want that every paragraph gets a drop cap, because that can quickly overload the text flow.

I decided to use span tags instead, which is also very common. Here are the attributes for the CSS class I add to the span tag.

.dropcaps {
    font-size: 300% !important;
    width: 0.7em !important;
    line-height: 80% !important;
    float: left !important;
    color: #808080 !important;
    margin-right: 9px; 
}

Don’t mind the !important keyword here too much please; it might be unnecessary. I chose to use it, because the Discourse software I use is a little tricky to handle. And I haven’t found a perfect approach to mess with the markdown engine and tag white-listing. That is work in progress [1]

You can set drop caps, also in Discourse (q.e.d.). I like to use it after first level headings, or to indicate context switches.

[1] https://github.com/norandom/discourse-span-tag-whitelist

Letter illuminations

Another stylistic element of typography are letter illuminations.

These artful letters origin from scribes. As you can see it’s quite possible to render text in websites around a letter illumination in 2017. In Webkit. Other browsers do not respect the form, and layout the text paragraph in a rectangular way.

There are workarounds for other browsers, but I found them to be too tedious. - Not even worth mentioning. You’d need to set space elements, somehow.
Instead I emphasize on the simple solution, which I believe will become common:

.sclass_img {
    shape-outside: url(s.png);
    shape-image-threshold: 0.1;
    shape-margin: 6px;
    float: left;
}

The sclass is a CSS class for the S-letter illumination, and the browser calculates the shape outline based on the opacity parameter (0,1 here). The position of the paragraph needs to be relative to the shape-outside.

Experiment: added noise to background

In Digital Signal Processing natural spectrum noise can be used as a baseline (in a Fourier Transformation for example). I am experimenting with the concept of adding noise to the background. - To make it easier for readers to distinguish between foreground and background, because the distinction is natural. My thinking is, that our eyes and our perception are accustomed to distinguish shapes on top of natural noise.

There is a service to generate images with a noise gradient.

background-url: http://api.thumbr.it/whitenoise-1024x768.png?background=E6E6E6ff&noise=c9c9c9&density=7&opacity=35

I used noise, which would not stand out against the base background color. It’s important that this is vague, and not dominant.

For ecological reasons newspapers are printed on recycled paper since the mid 19th century. This paper has residual ink, which is not evenly distributed. This is like the noise, which I added via the service.

Summary

It’s possible to make huge readability improvements to websites and documents via the means of typography. A professional layout software can do more than a web browser. Personally I’d use LaTeX or Scribus for important documents, like a CV or a proposal for a large project.

CSS3 and modern browsers are quite capable. - But not capable enough. Browsers render billions of line of text each day. - But do not have proper text justification options. The worst thing is, that they fallback to render fonts as fast as possible.

Thing is: this website looks best in Chrome, and most readable on IE. That is concerning.

More about typography

Version history

20.07.2017 - initial release after lots of try and error
21.07.2017 - added books references, updated experiment