Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form. The quick brown fox jumps over the lazy dog.
Typography is the craft of endowing human language with a durable visual form.
Typography is the craft of endowing human language with a durable visual form.
Typography is the craft of endowing human language with a durable visual form.
Typography is the craft of endowing human language with a durable visual form.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Abreu
Didot
Aa Bb
Rg
Rg
Usage
1. Link a stylesheet
Pick the optical size you need, or load them all:
<!-- Single optical size -->
<link rel="stylesheet"
href="https://albinlenell.github.io/fonts/css/abreudidot-24.css">
<!-- All optical sizes -->
<link rel="stylesheet"
href="https://albinlenell.github.io/fonts/css/abreudidot-all.css">
2. Apply in CSS
Each optical size registers as a separate font-family:
h1 {
font-family: 'AbreuDidot 64', serif;
font-weight: 300;
}
body {
font-family: 'AbreuDidot 11', serif;
font-weight: 300;
}
em {
font-style: italic; /* italic variant loads automatically */
}
3. Available optical sizes
| Family Name | CSS File | Intended Use |
|---|---|---|
| AbreuDidot 06 | abreudidot-06.css | Caption, fine print |
| AbreuDidot 11 | abreudidot-11.css | Body text |
| AbreuDidot 16 | abreudidot-16.css | Subheadings |
| AbreuDidot 24 | abreudidot-24.css | Headings |
| AbreuDidot 42 | abreudidot-42.css | Display |
| AbreuDidot 64 | abreudidot-64.css | Large display |
| AbreuDidot 96 | abreudidot-96.css | Banner, poster |
4. Available weights
| Weight | CSS Value | Styles |
|---|---|---|
| Light | font-weight: 300 | normal, italic |
| Medium | font-weight: 500 | normal, italic |
| Bold | font-weight: 700 | normal, italic |