Scale

Headings

Class name

Font Size

Line Height

Sample

Heading

44px (2.75rem)

1.25

This is Extra Large (XL) Heading

Heading

36px (2.25rem)

1.25

This is Large (L) Heading

Heading

28px (1.75rem)

1.25

This is Medium (M) Heading

Heading

24px (1.5rem)

1.25

This is Small (S) Heading

Heading

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

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

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

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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.

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.

Button text

Lists

Unordered list

This is an unordered list item
This is anunordered list item
This is anunordered list item

Ordered list

This is an ordered list item
This is an ordered list item
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

Go to navigator (z)
Open Custom Code (must be on every page) symbol
Open Responsive Typography Embed code editor
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.