In-depth guide to the best open-source typefaces: https://www.beautifulwebtype.com
See the codeIn 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/
All typefaces are licensed under the SIL Open Font License.
I'm happy to receive suggestions for typefaces via a GitHub issue. 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.
Install dependencies and start the Next.js dev server:
pnpm install
pnpm dev
Useful commands:
pnpm build
pnpm test
The site's authored content lives in content/.
Create content/typefaces/<slug>/ with:
meta.ymldetail.htmlsample.htmlglyphs.ymlmeta.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:
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:
sampleClasses: "[font-feature-settings:'smcp']"
glyphs.yml must include:
fontFile: /assets/fonts/example/example.woff
Create content/pairings/<slug>/ with:
meta.ymlsample.htmlmeta.yml must include name, dateAdded, typefaces, and optional sampleShade.
sample.html is the trusted HTML fragment rendered on pairing cards.
content/site/text.yml holds the shared specimen copy plus the reusable words, headlines, and paragraphs arrays used across specimen pages.
(top 24 of 87)
970 followers · starred Jul 2015
1,271 followers · starred Jan 2012
184 followers · starred Jan 2012
3,232 followers · starred Jun 2022
In-depth guide to the best open-source typefaces: https://www.beautifulwebtype.com
See the codeIn 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/
All typefaces are licensed under the SIL Open Font License.
I'm happy to receive suggestions for typefaces via a GitHub issue. 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.
Install dependencies and start the Next.js dev server:
pnpm install
pnpm dev
Useful commands:
pnpm build
pnpm test
The site's authored content lives in content/.
Create content/typefaces/<slug>/ with:
meta.ymldetail.htmlsample.htmlglyphs.ymlmeta.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:
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:
sampleClasses: "[font-feature-settings:'smcp']"
glyphs.yml must include:
fontFile: /assets/fonts/example/example.woff
Create content/pairings/<slug>/ with:
meta.ymlsample.htmlmeta.yml must include name, dateAdded, typefaces, and optional sampleShade.
sample.html is the trusted HTML fragment rendered on pairing cards.
content/site/text.yml holds the shared specimen copy plus the reusable words, headlines, and paragraphs arrays used across specimen pages.
(top 24 of 87)
970 followers · starred Jul 2015
1,271 followers · starred Jan 2012
184 followers · starred Jan 2012
3,232 followers · starred Jun 2022