@celine/libertine

Installation

You can import @celine/libertine with:

<link 
  rel="stylesheet" 
  href="https://esm.sh/jsr/@celine/[email protected]/libertine.css" />

Fonts

I lied a little in the abstract. @celine/libertine actually uses the more maintained Libertinus font family fork.

The libertinus.css stylesheet provides authoritative documentation on the available font faces, variants, and OpenType features, with Opentype-Features.pdf as a demo page.

font-feature-settings: 'liga', 'tnum', 'zero' 'calt'; (ligatures, tabular figures, slashed zero & contextual alternatives) are enabled by default.

fi fl ffi ffl
1234567890
Quest, (staff)
H₂O, E = mc²

libertinus.css makes a number of fonts available:

Libertinus Serif
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Small caps.
All small caps.

Libertinus Sans
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Small caps.
All small caps.

Libertinus Display
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.

Libertinus Mono
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.

Libertinus Initials
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Libertinus Math
E = mc²
∫ₐᵇ f(x) dx
∑ₙ₌₁^∞ 1/n² = π²/6
∇·E = ρ/ε₀

Libertinus Keyboard

Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Del
`1234567890-= Back
Tab QWERTYUIOP[]\
Capslock ASDFGHJKL;' Enter
Shift ZXCVBNM,./ Shift
Ctrl Windows Alt Space Alt Fn ← ↑ ↓ →

Small caps are available on Libertinus Serif and Libertinus Sans:

Classes

Google, GitHub

Elements

<code> is used to display inline code.

<main> applies a max-width and margin: 0 auto to center content.

HTML <abbr> is used to display an abbreviation.

Esc <kbd> is used to display keyboard buttons.

July 7. The <time> element is used to display a date or time.

<output>

is used to display the result of a calculation.

<blockquote> is used to display a blockquote.

  <pre> is used to display preformatted text.

<code> inside of a <pre> is used to apply syntax highlighting.
console.log("Hello, world!");

Parameterizing Observable Plot's className option with "card" will set class="card-figure" on the <figure> element. Thus, the .card class is also aliased to .card-figure

Headers / silcrow