Github link

What is GutenType?

What is GutenType?

What is GutenType?

What is GutenType?

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