What is GutenType?

Jan 31, 2021 – Awjin Ahn

Typography was solved centuries ago by print publishers, who created rules for font size, line height, etc. to improve the readability of text.

GutenType is a Sass library that translates those rules into CSS. You configure it with values (like a base font size), and it generates correct typographic styles for you. With minimal effort, GutenType makes your HTML read more like print.

@use 'guten-type';

article {
  @include guten-type.set(
    $font-size: 20px,
    $line-height: 1.5,
  );

  @include guten-type.press();
}

GutenType ships with sensible default values. This website uses those defaults, with just a few added styles.

Comprehensive

GutenType properly styles all HTML elements that can be rendered from Markdown.

Sad boi — For example, this is what an image looks like.

By default, it uses a modern font stack:

Serif	Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif
Sans	Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif
Mono	ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace

Final thoughts

As frontend engineers, we are responsible for making the web more usable.
Screens are tough on the eyes. Let's do what we can to improve the ergonomics of reading on the web.
See the source on Github.