Type System
Zeta's typographic system uses IBM Plex light*, regular and medium sans font, respecting the 4px mini unit while it scales.
* Use Arial for web and System Sans Serif per operating system fall back font.
IBM Plex Sans
300
The IBM Plex Sans light is used for intro titles like marketing landing pages taking full advantage of their high contrast in size and pairings with the rest of the type sizes.
IBM Plex Sans
400
The IBM Plex Sans regular is used for the body.
IBM Plex Sans
500
The IBM Plex Sans medium is everything else like atoms, components and UI content in general, like UI intros or UI landing pages or sections.
Scale, style and vertical rhythm
The Zeta type scale was created to provide hierarchy for all types of experiences based on a single formula. The formula assumes that the smallest size is 12px and increases x1 based on the 4px mini unit, applied to line height too.
0.75/1
Plex Sans 300 12/16
Plex Sans 400 12/16
Plex Sans 500 12/16
0.875/1*
Plex Sans 300 14/16
Plex Sans 400 14/16
Plex Sans 500 14/16
1/1.25
Plex Sans 300 16/20
Plex Sans 400 16/20
Plex Sans 500 16/20
1.25/1.5
Plex Sans 300 20/24
Plex Sans 400 20/24
Plex Sans 500 20/24
1.5/1.75
Plex Sans 300 24/28
Plex Sans 400 24/28
Plex Sans 500 24/28
1.75/2
Plex Sans 300 28/32
Plex Sans 400 28/32
Plex Sans 500 28/32
2/2.25
Plex Sans 300 32/36
Plex Sans 400 32/36
Plex Sans 500 32/36
2.25/2.5
Plex Sans 300 36/40
Plex Sans 400 36/40
Plex Sans 500 36/40
2.5/2.75
Plex Sans 300 40/44
Plex Sans 400 40/44
Plex Sans 500 40/44
2.75/3
Plex Sans 300 44/48
Plex Sans 400 44/48
Plex Sans 500 44/48
3/3.25
Plex Sans 300 48/52
Plex Sans 400 48/52
Plex Sans 500 48/52
3.25/3.5
Plex Sans 300 52/56
Plex Sans 400 52/56
Plex Sans 500 52/56
* The 0.875 is the only size that falls off the mini unit scale, to meet very specific criteria, and forced to be used for single line text only. It never changes line height even in component design.
Dedicated type styles
The Zeta typographic system uses certain sizes and weights from the full type scale while creating a strong foundation on type treatment for more to come.
rem
px
size
squish
style
0.75/1
12/16
x3/x4
x2
Body small.
UI components and UI content design
0.875/1
14/16
x3.5/x4
x2
Description*
UI components and UI content design
0.75/1
12/16
x3/x4
x2
Title small - Heading 6 - Label Small
UI components and UI content design
1/1.25
16/20
x4/x5
x2
Title medium - Heading 5 - Label Medium
UI components and UI content design
1/1.5
16/24
x4/x6
x2
Body Medium
Content overall
1.25/1.5
20/24
x5/x6
x2
Title large - Heading 4 - Label Large
UI sections and landing pages
1.25/1.75
20/28
x5/x7
x2
Body large
Intro content overall
1.5/1.75
24/28
x6/x7
x2
Heading Small
UI sections and landing pages
1.75/2
28/32
x7/x8
x2
Heading Medium
UI sections and landing pages
2/2.25
32/36
x8/x9
x2
Heading Large
UI intro sections and landing pages
2.25/2.5
36/40
x9/x10
x2
Display Small
Landing page intros and sections
2.75/3
44/48
x11/x12
x2
Display Medium
Landing page intros and sections
3.25/3.5
52/56
x13/x14
x2
Display Large
Landing page intros.
Spacing
The amount of space above and below the element (squish), is based on the 4px mini unit and it is always squish.x2 (8px/0.5rem top and bottom)
Every zeta type style is using the squish property to add controlled space below and above it so a better vertical rhythm is achieved.
squish
type
x2
Body small.
x2
Description*
x2
Title small - Heading 6 - Label Small
x2
Title medium - Heading 5 - Label Medium
x2
Body Medium
x2
Title large - Heading 4 - Label Large
x2
Body large
x2
Heading Small
x2
Heading Medium
x2
Heading Large
x2
Display Small
x2
Display Medium
x2
Display Large
Zeta also provides the reset (0 stack, height=size) property for all type so they can be used as atomic elements for component design but using text blocks.
squish
type
x0
Description*
x0
Body small.
x0
Title small - Heading 6 - Label Small
x0
Title medium - Heading 5 - Label Medium
x0
Body Medium
x0
Title large - Heading 4 - Label Large
Type style categories
Zeta uses four distinctive categories of type sizes, for displays, headings, titles, and body.
Displays
Landing page intros and sections use extremely big sizes, we call these Displays and they are mainly light.
Display Large
Display Medium
Display Small
Headings
UI intro sections and landing pages use a bigger size from H3 up to H1, we call these Headings and they are mainly medium.
Heading Large
Heading Medium
Heading Small
Titles
UI components and UI content design as well as Atoms are using smaller sizes from body-small up to the heading 4, we call these Titles and they are mainly medium.
Title Large - Heading 4
Title Medium - Heading 5
Description title
Title Small - Heading 6
Labels
UI components and UI content design as well as Atoms are using smaller sizes from Heading 6 to heading 4, we call these Labels and they are mainly medium plus their height is the same as their size.
Label Large
Label Medium
Description label
Label Small
Body
UI components, UI content design, Intro sections and landing pages all use the Body size. The small Body size can be seen more often in components and UI. Body is always Regular.
Body large
Body Medium
Body small
Type style pairings
Display Large
Body-Large 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Display Medium
Body-Large 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Display Small
Body-Large 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
heading 1
Body-Large 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
heading 2
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
heading 3
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Content design
Use this scale for content design for landing pages dividing your content into sections following a title and body size hierarchy. Content design starts with the largest Display followed by a large body size. Similarly, while content expands into sub sections smaller title sizes follow along with relevant body sizes. This scale is dedicated to create a high contrast moment between content design and interface design. The difference between the two styles of design refers to user's focus, while a big scale is more to raise attention, the smaller scale helps users focus execute tasks. We mainly use Display sizes and headings to achieve this as well as body's sizes. Finally, the Content design type sets are the only ones that are responsive, mobile and down, excluding the body sizes.
When to use:
Users are trying to learn and explore, and are primarily scanning and reading.
Interactions are more passive through impactful imagery, layout, and long form reading.
Users typically traverse a series of pages during one session.
Key performance indicators consider success in terms of click-through rates and final purchases.
Given these considerations, larger type sizes and a more editorial approach allows users to scan, read, and navigate multiple pages with comfort and ease.
Title large
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Title medium
Body-Medium 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Description title
Body-Small 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Title small
Body-Small 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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Label Small
Label Medium
Label Large
UI design
Use this scale for UI design as well as UI content design dividing your content into visually meaningful categories and UI sections. We use this scale to help users execute a task and stay focused on the UI. The contrast is wicker than the content design approach as we traditional need to fit more elements onto the given space for use. We mainly use Titles and body's smaller sizes to achieve this.
When to use:
Users are focused on getting a specific job done.
Interactions are more active, through inputs, forms, and controls.
Users are embedded within the experience, often on one page, for awhile.
Key performance indicators consider success in terms of time needed to complete a task and also the abandonment rate.
Given these considerations, space efficiency is key. Keeping content condensed is helpful to support focus on complex tasks.
Body small.
Body Medium
Body large
Title small - Heading 6 - Label Small
Description*
Title medium - Heading 5 - Label Medium
Title large - Heading 4 - Label Large
Components design
Use this scale to design your components and atoms as well delivering a more robust and user focused typographic sizing. We mainly use titles and body's smaller sizes with no space under them. Space, if needed, gets added to their parent container.
When to use:
Creating and composing components.
Display large
Display medium
Display small
Heading 1
Heading 2
Heading 3
Title large - Heading 4 - Label Large
Title medium - Heading 5 - Label Medium
Description*
Title small - Heading 6 - Label Small
Body large
Body Medium
Body small.
Blending - high/low contrast.
Use this combo to create high contrast moments. By this we achieve a more interesting layout to drive user's attention to certain areas of the page where extra focus or info is needed.
When to use:
If your users are working in a product but pausing to read or scan for options, an content design sizing can facilitate easy reading and/or create a desired impact or pause.
If your users are on the website and reading, but then switch to a focused task within the web experience, using UI design sizings within that component would facilitate focus.
Responsive typography
Responsive type affects only the dedicated content design type sizes, displays and headings, and only for mobile (767px and below) where decreased sizes can be found in either their size, height and stack, or in all of them, respecting the x4 spacing rule. The responsive scale system decreases a size down of its original size.
Breakpoint
rem
px
size
squish
type
767 and below
2.75/3
44/48
x11/x12
x2
Display Large to Display Medium
767 and below
2.25/2.5
36/40
x9/x10
x2
Display Medium Display Small
767 and below
2/2.25
32/36
x8/x9
x2
Display Small to Heading 1
767 and below
1.75/2
28/32
x7/x8
x2
heading 1 to Heading 2
767 and below
1.5/1.75
24/28
x6/x7
x2
heading 2 to Heading 3
767 and below
1.25/1.5
20/24
x5/x6
x2
Heading 3 to Title Large (H4)
Typographic colour
Type colour should be carefully considered, with legibility and accessibility as paramount concerns. Keep type colour neutral in running text. We use #1D1E23 for default text and #545963 for subtle text. Use link colour blue for primary actions and same as type neutral for secondary actions. Other use cases for coloured type are code snippets, warnings, alerts, etc.