@celine/libertine

Max Bo

@celine/libertine is a drop-in stylesheet based around the Linux Libertine font family.

Linux Libertine is common in academic typesetting - it's the mandatory font for the ACM LaTeX conference paper theme, the default for Typst and Nota papers, and an alternate font for LaTeX.css.

GitHub	MaxwellBo/celine + /issues	License	MIT
JSR	jsr.io/@celine/libertine + /docs	Version	12.0.0, Nov 29 2024

Installation

You can import @celine/libertine with:

<link 
  rel="stylesheet" 
  href="https://esm.sh/jsr/@celine/libertine@12.0.0/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:

Small caps

All small caps

Small caps

All small caps

Classes

Jane Doe, University of Wollongong

John Smith, University of Townsville

This is an abstract.

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.

Placeholder image — This is <figcaption> in a <figure>.

  <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

An <aside> tag pulls content out of the <main>. ⁽²⁾

When the width of the window is constrained, the <aside> will pull back into the main flow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum