## File: README.md # [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//` 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//` 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. --- ## File: assets/fonts/fraunces/README.md # Fraunces, by Undercase Type *Designed by Phaedra Charles and Flavia Zimbardi.* Fraunces is a display, "Old Style" soft-serif typeface inspired by the mannerisms of early 20th century typefaces such as Windsor, Souvenir, and the Cooper Series. ## Desktop Recommendations You can install all the fonts in the `Desktop` folder of this release at once, and their separate font family names will keep them separate in font menus. However, because variable fonts are still somewhat new and still gaining software support, you will have the most success using the static fonts in most cases, and using the variable fonts mostly on the web. ### Desktop/Variable – Best for desktop web design in Sketch & experimental use in Adobe apps The variable fonts will appear under a single family name: - Fraunces This family will allow access of 12 styles: 6 weights + Italics. Many apps will automatically set the Optical Size axis to the appropriate value, given the current font size. Some apps will allow you to adjust the variable axes directly, such as Sketch, Adobe Illustrator, and Adobe Photoshop. ### Desktop/Static – Best for graphic design for print & general desktop use The static fonts are best to use if you are doing work that you intend for print or exporting to PDFs. Currently, even though variable fonts are usable in Adobe apps, they often have issues being exported to PDF, so it tends to be best to use static fonts for most graphic design purposes. When installed, the static fonts will each contain 6 weights + Italics, and have the following family names: - Fraunces 9pt - Fraunces 9pt Soft - Fraunces 9pt SuperSoft - Fraunces 72pt - Fraunces 72pt Soft - Fraunces 72pt SuperSoft - Fraunces 144pt - Fraunces 144pt Soft - Fraunces 144pt SuperSoft ## Web Recommendations Here’s where variable fonts really shine. If you expect to use just two weights in three or more sizes (e.g. Regular & Bold at 16px, 40px, and 100px), you will start to save filesize by using a variable font over the static fonts. Of course, if really only want one or two styles of a font, it may be beneficial to use static web fonts instead.