Why Typography Matters

What is typography used for? Typography is everywhere text plays a role—on websites, in documents, on social media, in presentations, on packaging, and in all communication materials. It doesn't just make content readable, but also conveys personality and mood. The right font choice creates hierarchy, directs attention, and helps communicate complex information clearly. Typography is the foundation on which your messages build.

Why is it so important? Type is more than just letters on a page—it's a powerful communication tool. The right typography makes the difference between "that looks professional" and "that looks carelessly thrown together". It influences how people perceive your content and whether they take the time to read it. Consistent typography builds trust, improves readability, and makes your brand recognizable. Bad typography can ruin even the best content.

What can you achieve with it? With professional typography, you improve the readability of your content and make it more accessible to your target audience. You create a visual hierarchy that guides people through your content and highlights important information. The right font choice conveys your brand personality and makes your communication consistent and trustworthy. Whether it's short headlines or long texts—good typography makes the difference between "forgotten" and "unforgettable".

System UI – Regenfass Brand Font

The brand uses the system UI font stack for headings and body text. One stack for all typography. Line height: 1.4. No external font loading required.

Font stack (CSS)

ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Used for --font-heading and --font-body in app/styles.css.

The quick brown fox jumps over the lazy dog

Regular, line-height 1.4

The quick brown fox jumps over the lazy dog

Bold (600), line-height 1.4

Specification

  • Font stack: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Line height: 1.4
  • Usage: Headings and body (same stack)

Typography Showcase

System UI stack – Line height 1.4

Weight 400 – Regular

The quick brown fox jumps over the lazy dog

H1: 48px / 3rem, Regular (400), line-height 1.4

The quick brown fox jumps over the lazy dog

H2: 40px / 2.5rem, Regular (400), line-height 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Body: 18px, Regular (400), line-height 1.4

Weight 600 – Bold

The quick brown fox jumps over the lazy dog

H1: 48px / 3rem, Bold (600), line-height 1.4

The quick brown fox jumps over the lazy dog

H4: 24px / 1.5rem, Bold (600), line-height 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Body: 18px, Bold (600), line-height 1.4

Typography in Use

One font stack for everything: system UI (ui-sans-serif, system-ui, sans-serif + emoji fallbacks) with line-height 1.4. Use weight 400 for body text and 600 for headings and emphasis.

Heading Example

Headings and body both use the system UI font stack. Line height is 1.4 throughout for consistent, readable typography across all Regenfass materials.

Subheading Example

Keep hierarchy clear with bold (600) for headings and regular (400) for body. Same stack, same line-height—simple and on-brand.

Usage Examples

CSS Variables

/* System UI stack – no @import or link required */
--font-heading: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-body: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--line-height-body: 1.4;

body {
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.4;
}

Font stack reference

Headings and body use the same stack:

ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Font stack & licenses

The primary brand typography uses the system UI font stack (no license required). Optional font packages may be included in releases; see FONT_LICENSES.md for third-party licenses.

Primary: system UI stack

Stack: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Usage: Headings and body in app/styles.css (--font-heading, --font-body).

No external font loading or license required.

Optional fonts & license information

For optional font files and detailed license information, see:

FONT_LICENSES.md