Typography

Playlister provides a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Headings

Use the separate class for each size to overwrite visual style while maintaining the proper semantic order.

.h0 Class

H0 — 3.75rem (60px) / 1

Semantic H1

H1 — 3.125REm (50px) / 1.1

H1 Class

H1

Semantic H2

H2 — 2.375rem (38px) / 1.2

H2 Class

H2

Semantic H3

H3 — 2rem (32px) / 1.3

H3 Class

H3

Semantic H4

H4 — 1.2rem (20px) / 1.3

H4 Class

H4
Semantic H5
H5 — 1rem (16px) / 1.3
H5 Class
H5
Semantic h6
H6 — 0.875rem (14px) / 1.3
H6 Class
H6

Body

Benton Sans is the standard typeface for Playlister on the web for large texts, headings and paragraphs, and Freight Text Pro is used in some cases for small texts and for H6 (h6 headings).

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-xl — 1.5rem (24px) / 1.5

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph-l — 1.375rem (22px) / 1.6

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world. Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph — 1.25rem (20px) / 1.6

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities. We need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-s — 0.875REM (14px) / 1.6
This goes over headings
Eyebrow — 0.875rem (14px) / 1.5
This goes over headings
Caption — 0.75rem (12px) / 1.3
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
  • Eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
  • Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
List — 1.25rem (20px) / 1.7