# [Beautiful Web Type](https://beautifulwebtype.com)

In October 2018 I released a completely re-thought and re-designed version of this project. The new version aims to provide a complete look at each typeface, cataloging all the available weights and styles, the full glyph set, the kerning quality, OpenType features, recommended pairings and more. I will highlight only typefaces that show a high level of quality.

The original version of the site is archived here: https://beautifulwebtype.com/v1/

## Changelog

### 20 Mar 2026
* **Removed Jost**, as the creator now charges for the variable font.

### 06 Jun 2025
* **Added [Commissioner](https://beautifulwebtype.com/commissioner/)**.

### 05 Jun 2025
* **Added [Instrument Sans](https://beautifulwebtype.com/instrument-sans/)**.
* **Added [Instrument Serif](https://beautifulwebtype.com/instrument-serif/)**.

### 23 Oct 2023
* **Added [TASA Orbiter](https://beautifulwebtype.com/tasa-orbiter/)**.

### 8 Apr 2023
 * **Updated [Source Code Pro](https://beautifulwebtype.com/source-code-pro/)** to version 1.024.

### 22 Nov 2020
* **Added [Fraunces](https://beautifulwebtype.com/fraunces/)**.
* **Added pairing example** for Fraunces and Libre Franklin.
* **Added pairing example** for Messapia and Inter.

**[Read full Changelog](./CHANGELOG.md)**

## Featured typefaces
All typefaces are licensed under the [SIL Open Font License](https://scripts.sil.org/OFL).

* [Alegreya](https://beautifulwebtype.com/alegreya/) → [Glyph inspector](https://beautifulwebtype.com/alegreya/glyphs/)
* [Alegreya Sans](https://beautifulwebtype.com/alegreya-sans/) → [Glyph inspector](https://beautifulwebtype.com/alegreya-sans/glyphs/)
* [Archivo](https://beautifulwebtype.com/archivo/) → [Glyph inspector](https://beautifulwebtype.com/archivo/glyphs/)
* [Archivo Black](https://beautifulwebtype.com/archivo-black/) → [Glyph inspector](https://beautifulwebtype.com/archivo-black/glyphs/)
* [BioRhyme](https://beautifulwebtype.com/biorhyme/) → [Glyph inspector](https://beautifulwebtype.com/biorhyme/glyphs/)
* [BioRhyme Expanded](https://beautifulwebtype.com/biorhyme-expanded/) → [Glyph inspector](https://beautifulwebtype.com/biorhyme-expanded/glyphs/)
* [Commissioner](https://beautifulwebtype.com/commissioner/) → [Glyph inspector](https://beautifulwebtype.com/commissioner/glyphs/)
* [Cooper Hewitt](https://beautifulwebtype.com/cooper-hewitt/) → [Glyph inspector](https://beautifulwebtype.com/cooper-hewitt/glyphs/)
* [Crimson Pro](https://beautifulwebtype.com/crimson-pro/) → [Glyph inspector](https://beautifulwebtype.com/crimson-pro/glyphs/)
* [Fira Code](https://beautifulwebtype.com/fira-code/) → [Glyph inspector](https://beautifulwebtype.com/fira-code/glyphs/)
* [FiraGo](https://beautifulwebtype.com/firago/) → [Glyph inspector](https://beautifulwebtype.com/firago/glyphs/)
* [Fivo Sans](https://beautifulwebtype.com/fivo-sans/) → [Glyph inspector](https://beautifulwebtype.com/fivo-sans/glyphs/)
* [Fivo Sans Modern](https://beautifulwebtype.com/fivo-sans-modern/) → [Glyph inspector](https://beautifulwebtype.com/fivo-sans-modern/glyphs/)
* [Fraunces](https://beautifulwebtype.com/fraunces/) → [Glyph inspector](https://beautifulwebtype.com/fraunces/glyphs/)
* [iA Writer Quattro](https://beautifulwebtype.com/ia-writer-quattro/) → [Glyph inspector](https://beautifulwebtype.com/ia-writer-quattro/glyphs/)
* [IBM Plex Mono](https://beautifulwebtype.com/ibm-plex-mono/) → [Glyph inspector](https://beautifulwebtype.com/ibm-plex-mono/glyphs/)
* [IBM Plex Sans](https://beautifulwebtype.com/ibm-plex-sans/) → [Glyph inspector](https://beautifulwebtype.com/ibm-plex-sans/glyphs/)
* [IBM Plex Sans Condensed](https://beautifulwebtype.com/ibm-plex-sans-condensed/) → [Glyph inspector](https://beautifulwebtype.com/ibm-plex-sans-condensed/glyphs/)
* [IBM Plex Serif](https://beautifulwebtype.com/ibm-plex-serif/) → [Glyph inspector](https://beautifulwebtype.com/ibm-plex-serif/glyphs/)
* [Inria Sans](https://beautifulwebtype.com/inria-sans/) → [Glyph inspector](https://beautifulwebtype.com/inria-sans/glyphs/)
* [Inria Serif](https://beautifulwebtype.com/inria-serif/) → [Glyph inspector](https://beautifulwebtype.com/inria-serif/glyphs/)
* [Instrument Sans](https://beautifulwebtype.com/instrument-sans/) → [Glyph inspector](https://beautifulwebtype.com/instrument-sans/glyphs/)
* [Instrument Serif](https://beautifulwebtype.com/instrument-serif/) → [Glyph inspector](https://beautifulwebtype.com/instrument-serif/glyphs/)
* [Inter](https://beautifulwebtype.com/inter/) → [Glyph inspector](https://beautifulwebtype.com/inter/glyphs/)
* [Le Murmure](https://beautifulwebtype.com/le-murmure/) → [Glyph inspector](https://beautifulwebtype.com/le-murmure/glyphs/)
* [Libre Franklin](https://beautifulwebtype.com/libre-franklin/) → [Glyph inspector](https://beautifulwebtype.com/libre-franklin/glyphs/)
* [Lora](https://beautifulwebtype.com/lora/) → [Glyph inspector](https://beautifulwebtype.com/lora/glyphs/)
* [Messapia](https://beautifulwebtype.com/messapia/) → [Glyph inspector](https://beautifulwebtype.com/messapia/glyphs/)
* [Oswald](https://beautifulwebtype.com/oswald/) → [Glyph inspector](https://beautifulwebtype.com/oswald/glyphs/)
* [Playfair Display](https://beautifulwebtype.com/playfair-display/) → [Glyph inspector](https://beautifulwebtype.com/playfair-display/glyphs/)
* [Poppins](https://beautifulwebtype.com/poppins/) → [Glyph inspector](https://beautifulwebtype.com/poppins/glyphs/)
* [Rakkas](https://beautifulwebtype.com/rakkas/) → [Glyph inspector](https://beautifulwebtype.com/rakkas/glyphs/)
* [Source Code Pro](https://beautifulwebtype.com/source-code-pro/) → [Glyph inspector](https://beautifulwebtype.com/source-code-pro/glyphs/)
* [Source Sans Pro](https://beautifulwebtype.com/source-sans-pro/) → [Glyph inspector](https://beautifulwebtype.com/source-sans-pro/glyphs/)
* [Source Serif Pro](https://beautifulwebtype.com/source-serif-pro/) → [Glyph inspector](https://beautifulwebtype.com/source-serif-pro/glyphs/)
* [Space Grotesk](https://beautifulwebtype.com/space-grotesk/) → [Glyph inspector](https://beautifulwebtype.com/space-grotesk/glyphs/)
* [Space Mono](https://beautifulwebtype.com/space-mono/) → [Glyph inspector](https://beautifulwebtype.com/space-mono/glyphs/)
* [TASA Orbiter](https://beautifulwebtype.com/tasa-orbiter/) → [Glyph inspector](https://beautifulwebtype.com/tasa-orbiter/glyphs/)
* [Vollkorn](https://beautifulwebtype.com/vollkorn/) → [Glyph inspector](https://beautifulwebtype.com/vollkorn/glyphs/)
* [Work Sans](https://beautifulwebtype.com/work-sans/) → [Glyph inspector](https://beautifulwebtype.com/work-sans/glyphs/)
* [Zilla Slab](https://beautifulwebtype.com/zilla-slab/) → [Glyph inspector](https://beautifulwebtype.com/zilla-slab/glyphs/)

## Suggesting Typefaces

I'm happy to receive suggestions for typefaces via [a GitHub issue](https://github.com/ubuwaits/beautiful-web-type/issues). When sending suggestions please include an example or two of the typeface in use. This helps me to make an initial evaluation of the typeface.

## Local development

Install dependencies and start the Next.js dev server:

    pnpm install
    pnpm dev

Useful commands:

    pnpm build
    pnpm test

## Content authoring

The site's authored content lives in `content/`.

### Add a typeface

Create `content/typefaces/<slug>/` with:

- `meta.yml`
- `detail.html`
- `sample.html`
- `glyphs.yml`

`meta.yml` holds the typeface metadata used by the app, including `name`, `dateAdded`, `category`, `styles`, `weights`, `latestRelease`, `projectUrl`, `creator`, `description`, and optional fields like `gFontsUrl`, `italic`, `smallcap`, `sampleText`, `sampleClasses`, `familyFaces`, and `comparisonFaces`.

`detail.html` is the trusted HTML fragment rendered on the typeface detail page.

`sample.html` is retained as authored specimen source content. Listing cards and the top specimen on detail pages use shared specimen copy from `content/site/text.yml`, unless a typeface overrides it with `sampleText` in `meta.yml`.

`sampleClasses` can be used for per-typeface Tailwind overrides on the specimen stage. Quote the string when using responsive variants or arbitrary properties, for example:

```yml
sampleText: "Sharp & Quiet"
sampleClasses: "[--sample-fit-width:0.78] tracking-tight text-[#b42318] md:[--sample-fit-width:0.82]"
```

For OpenType features, use Tailwind arbitrary properties rather than `font-features-*`. For example, small caps should be:

```yml
sampleClasses: "[font-feature-settings:'smcp']"
```

`glyphs.yml` must include:

```yml
fontFile: /assets/fonts/example/example.woff
```

### Add a pairing

Create `content/pairings/<slug>/` with:

- `meta.yml`
- `sample.html`

`meta.yml` must include `name`, `dateAdded`, `typefaces`, and optional `sampleShade`.

`sample.html` is the trusted HTML fragment rendered on pairing cards.

### Shared site text

`content/site/text.yml` holds the shared `specimen` copy plus the reusable `words`, `headlines`, and `paragraphs` arrays used across specimen pages.