Scale

Headings

Class name

Font Size

Line Height

Sample

Heading

38px (2.375rem)

1.25

This is Extra Large (XL) Heading

Heading

32px (2rem)

1.25

This is Large (L) Heading

Heading

24px (1.5rem)

1.25

This is Medium (M) Heading

Heading

20px (1.25rem)

1.5

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.5

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

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 Heading 3 inside of a Rich Text

This is Heading 4 inside of a Rich Text

This is Heading 5 inside of a Rich Text

This is Heading 6 inside of a Rich Text

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

This is an ordered list item inside of a Rich Text
This is an ordered list item inside of a Rich Text
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

This is a 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.

T A L

This is some text inside of a div block.

T A C

This is some text inside of a div block.

T A R

This is some text inside of a div block.

T A J

This is some text inside of a div block.

Best Practices

Page Description

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.

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.