<commit_before>---
title: The State of Web Type
authors:
- bram-stein
intro: 'Typography has a long and rich history, but much has been lost in the transition to the web. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.'
tags:
- css
license: cc-by-3.0
---

Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has advanced a lot in the last couple years, we still have a long way to go. Features print designers take for granted are either nonexistent on the web or have insufficient browser support in order to be useful. Challenges unique to web browsers such as responsive design and web font loading could use some improvement as well. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.

## OpenType Features

Typeface designers often put extra features in a font that can be used to customise text rendering. These are called OpenType features and include character spacing, alignment, ligatures, alternative characters, and so on. There are in fact [more than 140 registered OpenType features](https://www.microsoft.com/typography/otspec/featurelist.htm). Many of these features are optional, but some are actually required to properly render text (e.g. kerning and required ligatures). OpenType features are reasonably well supported by modern web browsers, but still come with a lot of caveats that make them hard to use.

<figure class="figure">
	<img src="{{ page.id }}/figure-2.png" alt="" class="figure__media">
	<figcaption class="figure__caption">From left to right: contextual alternates set in Caflisch Script Pro, ligatures set in Warnock Pro, and small caps set in Chaparral Pro.</figcaption>
</figure>

An important caveat is that not all fonts include all 140+ OpenType features. Most fonts only contain a small subset of features, such as kerning and ligatures. Others may include discretionary features, such as swashes and alternate characters. With the proliferation of web font and subsetting services we can’t always rely on information about OpenType features and character support provided by typeface designers. We need better tools to look inside our font files to see which features and characters are supported and which are not.

If a font includes the features you wish to use, you still need to check if your target browsers support OpenType features. While most modern browsers support either the low-level `font-feature-settings` syntax or the high level `font-variant-*` syntax, there are still several browsers in common use that don’t support either syntax. Notable examples are Internet Explorer versions 6 to 9 and all versions of Android WebKit until 4.4. Luckily, the fallback behaviour for most OpenType features is graceful: text is still readable without them.

| Feature                          | IE10 | IE11 | Chrome | Firefox | Safari | Opera |
|----------------------------------|------|------|--------|---------|--------|-------|
| `font-feature-settings`          | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Ligatures (`liga`)               | Yes  | Yes  | Yes    | Yes     | Yes    | Yes   |
| Swashes (`swsh`)                 | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Old style numerals (`onum`)      | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Contextual alternates (`calt`)   | Yes  | Yes  | Yes    | Yes     | Yes    | Yes   |
| Small caps (`smcp`)              | Yes  | Yes  | Yes    | Yes     | No     | Yes   |

The above table summarizes browser support for the `font-feature-settings` property and a select number of OpenType features. You can find more browser [support data for common OpenType features on the State of Web Type](http://stateofwebtype.com/#opentype%20features).
<commit_msg>Design tag<commit_after>---
title: The State of Web Type
authors:
- bram-stein
intro: 'Typography has a long and rich history, but much has been lost in the transition to the web. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.'
tags:
- css
- design
license: cc-by-3.0
---

Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has advanced a lot in the last couple years, we still have a long way to go. Features print designers take for granted are either nonexistent on the web or have insufficient browser support in order to be useful. Challenges unique to web browsers such as responsive design and web font loading could use some improvement as well. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.

## OpenType Features

Typeface designers often put extra features in a font that can be used to customise text rendering. These are called OpenType features and include character spacing, alignment, ligatures, alternative characters, and so on. There are in fact [more than 140 registered OpenType features](https://www.microsoft.com/typography/otspec/featurelist.htm). Many of these features are optional, but some are actually required to properly render text (e.g. kerning and required ligatures). OpenType features are reasonably well supported by modern web browsers, but still come with a lot of caveats that make them hard to use.

<figure class="figure">
	<img src="{{ page.id }}/figure-2.png" alt="" class="figure__media">
	<figcaption class="figure__caption">From left to right: contextual alternates set in Caflisch Script Pro, ligatures set in Warnock Pro, and small caps set in Chaparral Pro.</figcaption>
</figure>

An important caveat is that not all fonts include all 140+ OpenType features. Most fonts only contain a small subset of features, such as kerning and ligatures. Others may include discretionary features, such as swashes and alternate characters. With the proliferation of web font and subsetting services we can’t always rely on information about OpenType features and character support provided by typeface designers. We need better tools to look inside our font files to see which features and characters are supported and which are not.

If a font includes the features you wish to use, you still need to check if your target browsers support OpenType features. While most modern browsers support either the low-level `font-feature-settings` syntax or the high level `font-variant-*` syntax, there are still several browsers in common use that don’t support either syntax. Notable examples are Internet Explorer versions 6 to 9 and all versions of Android WebKit until 4.4. Luckily, the fallback behaviour for most OpenType features is graceful: text is still readable without them.

| Feature                          | IE10 | IE11 | Chrome | Firefox | Safari | Opera |
|----------------------------------|------|------|--------|---------|--------|-------|
| `font-feature-settings`          | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Ligatures (`liga`)               | Yes  | Yes  | Yes    | Yes     | Yes    | Yes   |
| Swashes (`swsh`)                 | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Old style numerals (`onum`)      | Yes  | Yes  | Yes    | Yes     | No     | Yes   |
| Contextual alternates (`calt`)   | Yes  | Yes  | Yes    | Yes     | Yes    | Yes   |
| Small caps (`smcp`)              | Yes  | Yes  | Yes    | Yes     | No     | Yes   |

The above table summarizes browser support for the `font-feature-settings` property and a select number of OpenType features. You can find more browser [support data for common OpenType features on the State of Web Type](http://stateofwebtype.com/#opentype%20features).

{'fraction_non_alphanumeric': 0.08160889808587687, 'fraction_numerical': 0.004914640455250905, 'mean_word_length': 3.195876288659794, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3512942', 'n_tokens_mistral': 1945, 'n_tokens_neox': 1850, 'n_words': 1066}