Typography

Pollen

Github Tweet it 💙Star it 🖤

Search…

Introducing Pollen

Modules

Typography

Foundations in type

Modular Scale
Pollen provides a robust modular typography scale to encourage consistent typography sizing across an interface. Sizes are set in rem units to support proper font scaling, and assume a 16px root font-size.
Property group
Applies to
--scale-*
font-size
1
.heading {
2
  font-size: var(--scale-4);
3
}
Copied!
Property
Value
Equivalent to
--scale-000
0.75rem
12px
--scale-00
0.875rem
14px
--scale-0
1rem
16px
--scale-1
1.125rem
18px
--scale-2
1.25rem
20px
--scale-3
1.5rem
24px
--scale-4
1.875rem
30px
--scale-5
2.25rem
36px
--scale-6
3rem
48px
--scale-7
3.75rem
60px
--scale-8
4.5rem
72px
--scale-9
6rem
96px
--scale-10
8rem
128px
Font Families
Base font stacks as better alternatives to browser defaults, designed for rapid prototyping and to be overridden as your project grows.
Property group
Applies to
--font-*
font-family
1
body {
2
  font-family: var(--font-sans);
3
}
Copied!
Property
Value
--font-sans
system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue
--font-serif
Georgia, Cambria, "Times New Roman", Times, serif
--font-mono
Consolas, Menlo, Monaco, "Liberation Mono", monospace
Weights
Consistent font weights across an interface
Property group
Applies to
--font-*
font-weight
1
.heading {
2
  font-weight: var(--font-bold)
3
}
Copied!
Property
Value
--font-light
300
--font-regular
400
--font-medium
500
--font-semibold
600
--font-bold
700
--font-black
900
Leading
Encourage consistent line heights across an interface, applied as unitless values to scale with font size.
Property group
Applies to
--leading-*
line-height
1
body {
2
  line-height: var(--leading-normal);
3
}
Copied!
Property
Value
--leading-none
1
--leading-xs
1.25
--leading-sm
1.275
--leading-normal
1.5
--leading-lg
1.625
--leading-xl
2
Tracking
Encourage consistent letter spacing across an interface, applied as em units relative to the text's size
Property group
Applies to
--tracking-*
letter-spacing
1
.uppercase {
2
  letter-spacing: var(--tracking-00);
3
}
Copied!
Property
Value
--tracking-000
-0.05em
--tracking-00
-0.025em
--tracking-0
0
--tracking-1
0.025em
--tracking-2
0.05em
--tracking-3
0.1em
Measure
Max-widths optimised for legibility of large blocks of text, based on the font and font-size of content.
Property group
Applies to
--measure-*
max-width
1
article {
2
  max-width: var(--measure-normal);
3
  margin: 0 auto;
4
}
Copied!
Property
Value
Measure
--measure-narrow
45ch
45 characters
--measure-normal
65ch
65 characters
--measure-wide
80ch
80 characters

Contributing

Next - Modules

Layout

Last modified 4d ago

Copy link

Contents