Enable OpenType features

masakudamatsu / line-height-picker

A front-end web app that helps web designers/developers pick the best line-height value for their websites

https://line-height-picker.vercel.app

MIT License

2 stars 1 forks source link

Closed masakudamatsu closed 4 years ago

masakudamatsu commented 4 years ago

For all fonts, enable Kerning

font-kerning: normal;
font-feature-settings: 'kern'

Common ligatures

font-variant-ligatures: common-ligatures;
font-feature-settings: 'clig', 'liga';

Contextual ligatures and Alternates

font-variant-ligatures: contextual;
font-feature-settings: 'calt';

to follow what Tim Brown suggests in his book Flexible Typography

References

masakudamatsu commented 4 years ago

Tabular figures cannot be rendered. As an alternative, we use Fedra Sans Mono for input fields.

Occasionally, tabular figures work with the following CSS code

font-variant-numeric: lining-nums;
font-feature-settings: ‘tnum’;

If we use

font-variant-numeric: tabular-nums;
font-feature-settings: ‘tnum’;

old-style figures will be rendered.

masakudamatsu commented 4 years ago

Discretionary ligatures for arrows do not work either.

For the time being, we use the Unicode arrow characters rendered in a fallback font (system-ui)

We have contacted Typotheque.

masakudamatsu commented 4 years ago

We need to double-check OpenType features once the web font is purchased

masakudamatsu commented 4 years ago

Discretionary ligatures for arrows do not work with the purchased webfont.

masakudamatsu commented 4 years ago

For input field numbers, we don't use lining or tabular figures.

Lining figures are not monospaced, which look somehow awkward with tight spacing for 1, for example.
Tabular figures are monospaced, but old-styled. Different heights of 1 and 2 from 3 and 4 etc. look awkward as well.

So we stick to Fedra Mono for input field figures.