Web Type Essentials

23 Nov 2023

Last updated

tutorialtypographyweb

the current state of web technologies offers an excellent toolkit to develop and play with font technology to a great extent. let’s review some of the different features we can use to make our type more versatile, legible and fun.

table of contents

  1. contextual alternates
    1. calt
  2. ligatures
    1. dlig, liga
  3. tabular numbers
  4. fractions
  5. stylistic sets
  6. final thoughts
    1. happy typesetting!

contextual alternates

calt

contextual alternates allow some characters to play a bit more nicely around other characters

OFF (MEGA)SUPER[M]
ON (MEGA)SUPER[M]
3x9 12:34 ->
CSS
font-feature-settings: 'calt' 0;
Inter

you can check how the parentheses are better aligned with the capital letters, or the x character being swapped for a proper multiplication symbol.

note: safari has some trouble rendering these features. some might change, some might not. webdev… ikyk.

ligatures

dlig, liga

ligatures enable you to substitute sets of characters for a new, usually unified character that either looks cool, reads better or, ideally, both

off affair
on affair
Effiel stood
CSS
font-feature-settings: 'liga' 0, 'dlig' 0;
Literata

pay attention to the playful f s, and their interaction with the i s

dlig and liga do not enable the same features on the type system, but browsers do not seem to support every feature yet.

discretionary ligatures are, in general, are fancier versions of some characters. standard ligatures are, in general, more understated and intended for a better reading experience and easier text parsing. this, however, is totally up to the type designer and can mean completely different things on different type systems.

tabular numbers

tabular numbers are essential in, well… tables. this feature simply enables a monospaced set of numbers. mono (one, single) space (space) indicates that every character occupies the same exact space, which means that numbers align perfectly.

it is extremely encouraged to turn this feature on for stacked up numbers, like those found in tables.

off
1,456.99€
12,459.13€
on
1,456.99€
12,459.13€
1,340,567.67£
CSS
font-feature-setting: 'tnum' 0;
AT Name Sans

fractions

fractions are a severely underrated feature in OpenType. these allow us to quickly and easily build good looking fractions without pretty much any hassle, in a single CSS line.

1/3
1/3
2/8
CSS
font-feature-settings: 'frac' 0;
Recursive

Note: this feature can also be switched on/off through the font-variant-numeric: diagonal-fractions rule, and some of the previously mentioned features have their own named rules. i am nevertheless going to keep it simple by using font-feature-settings since it’s got the same notation across the board AND it really shows what OpenType features we are using. this allows for further research on those that interest us the most.

stylistic sets

because there we can only define so many styles in general terms, stylistic sets offer a very expressive way for typographers to define specific alternates for extreme control and fun.

these features depend greatly on the font at hand. in this example, Satoshi can swap the a, g and t characters through the ss01 , ss02 and ss03 settings, respectively.

but any other font will have their own features, dictated solely by the type designer. check your font’s feature sheet and inspect what’s possible! you’ll be surprised of how many things you could be missing out on.

Satoshi is great
Satoshi is great
Satoshi is great
CSS
font-feature-settings: 'ss01' 0, 'ss02' 0, 'ss03' 0;
Satoshi

final thoughts

these are some of the modern features that designers and developers have at hand when using type. there are a ton more available, and surely there are features being created and developed as you read this. make sure to dive deep into your typeface of choice to get as much as you can out of it.

happy typesetting!

2024