Typography

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Typography consists of basic text writing, including headings, body text, lists, and more.

Scale

Headings

Class name
Font Size
Line Height
Sample
Heading
XL
44px (2.75rem)
1.25

This is Extra Large (XL) Heading

Heading
L
36px (2.25rem)
1.25

This is Large (L) Heading

Heading
M
28px (1.75rem)
1.25

This is Medium (M) Heading

Heading
S
24px (1.5rem)
1.25

This is Small (S) Heading

Heading
XS
18px (1.125rem)
1.5
This is Extra Small (XS) Heading
Heading
XXS
16px (1rem)
1.5
This is Extra Extra Small (XXS) Heading

Body text

Class name
Font Size
Line Height
Sample
Body Text
L
18px (1.125rem)
1.75

This is Large (L) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
M
16px (1rem)
1.75

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
S
14px (0.875rem)
1.5

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Components

Rich Text

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  1. This is an ordered list item inside of a Rich Text
  2. This is an ordered list item inside of a Rich Text
  3. This is an ordered list item inside of a Rich Text
This is a block quote. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.
Tagline
Tagline
Text Wrapper
This is a Tagline

This is Large (L) Heading

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Sign In
Button text
Text Wrapper Centered
This is a Tagline

This is Large (L) Heading

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Sign In
Button text

Lists

Unordered list
  • This is an unordered list item
  • This is anunordered list item
  • This is anunordered list item
Ordered list
  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered list item
Unordered list with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
Horizontal list
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon

Alignment

You can set alignment for text elements by adding a class name from below.

Class name
Alignment
Sample
T A L
Left
This is some text inside of a div block.
T A C
Center
This is some text inside of a div block.
T A R
Right
This is some text inside of a div block.
T A R
Justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum hendrerit ex vitae sodales. Donec id leo ipsum. Phasellus volutpat aliquet mauris, et blandit nulla laoreet vitae. Quisque ante dui, porta eu felis nec, scelerisque pharetra turpis.

Best Practices

Font size and REMs

SystemFlow's typography system is based on REMs. REM values are relative to the root html element. Base font sizes for different viewports are specified in Custom Code (must be on every page) symbol inside Responsive Typography Embed.

REMs to Pixels

Let's take Heading / L as an example. It's font-font size is set to 2rem. Base font size on desktop is set to 16px. That means Heading / L is 32px (16px*2=32px). Base font size for tablet viewports is set to 15px so Heading / L will be 30px on Tablets etc. If you will change the font size of Heading / L from 2rem to 2.5rem then it will be: Desktop: 16px*2.5=40px, Tablet: 15px*2.5=37.5px etc. You can use this calculator to easily calculate rems to pixels.

Changing base font size on different viewports

  1. Go to navigator (z)
  2. Open Custom Code (must be on every page) symbol
  3. Open Responsive Typography Embed code editor
  4. Change px values for different devices. If you will change the font-size of Desktop viewport from 16px to 18px the base font will be 18px and all rem values will be multiplied by 18. For example: 2rem will be 18*2=36px.
Typography
Homepage
University
Changelog
Contact
Report a bug
© x SystemFlow. All rights reserved.
Designed in 🇵🇱 by Matt Wierzbicki & Greg Rog
arrow_upward