https://github.com/ubuwaits/beautiful-web-type
In-depth guide to the best open-source typefaces: https://beautifulwebtype.com
https://github.com/ubuwaits/beautiful-web-type
font fonts google-fonts typeface typography webfonts
Last synced: 15 days ago
JSON representation
In-depth guide to the best open-source typefaces: https://beautifulwebtype.com
- Host: GitHub
- URL: https://github.com/ubuwaits/beautiful-web-type
- Owner: ubuwaits
- License: mit
- Created: 2012-01-12T05:23:14.000Z (over 13 years ago)
- Default Branch: gh-pages
- Last Pushed: 2023-12-02T10:25:34.000Z (over 1 year ago)
- Last Synced: 2025-04-13T22:18:26.406Z (15 days ago)
- Topics: font, fonts, google-fonts, typeface, typography, webfonts
- Language: HTML
- Homepage:
- Size: 70.1 MB
- Stars: 7,289
- Watchers: 1,090
- Forks: 278
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [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
### 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.
### 21 Nov 2020
* **Added [Inter](https://beautifulwebtype.com/inter/)**.
* **Updated glyph inspector** to include plain text character in sidebar for easier copying.
### 23 May 2020
* **Added [Messapia](https://beautifulwebtype.com/messapia/)**.
* **Added [Crimson Pro](https://beautifulwebtype.com/crimson-pro/)**.
* **Updated [Source Code Pro](https://beautifulwebtype.com/source-code-pro/)** to variable version.
* **Updated [iA Writer Quattro](https://beautifulwebtype.com/ia-writer-quattro/)** to variable version.
* **Updated [Fire Code](https://beautifulwebtype.com/fira-code/)** to v4.0 variable version.
* **Updated [Lora](https://beautifulwebtype.com/lora/)** to variable version.
* **Updated [Work Sans](https://beautifulwebtype.com/work-sans/)** to variable version.
* **Updated [Space Grotesk](https://beautifulwebtype.com/space-grotesk/)** to variable version.
* **Updated Manrope** to variable version.
* **Updated [Source Serif Pro](https://beautifulwebtype.com/source-serif-pro/)** to variable version.
* **Updated [Source Sans Pro](https://beautifulwebtype.com/source-sans-pro/)** to variable version.
**[Read full Changelog](https://github.com/ubuwaits/beautiful-web-type/blob/gh-pages/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/)
* [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/)
* [Inter](https://beautifulwebtype.com/inter/) → [Glyph inspector](https://beautifulwebtype.com/inter/glyphs/)
* [Jost*](https://beautifulwebtype.com/jost/) → [Glyph inspector](https://beautifulwebtype.com/jost/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
To work with the site locally, start the Jekyll server and watch the Sass files with:
rake s