Typography

To change Typography, we can go to Theme settings > Typography, where you can universally change the font family of headings and body texts, as well as font scale level.

To change the font family, click on Change button. The styling of headings and body texts will follow default styling of the chosen font family.

To change content for each element, click on the corresponding element from each section.

To change the font size, you can change the value at Font Scale Level slider. Changing the font scale will change the overall font size, both heading and body font.

Font Scale Level is based on Body Font size. It ranges from 1-5 level, following body font size ranges from 16-20px. The default scale level is 1, which equals to body font size at 16px.

Based on the selected body font size, heading font size will be calculated in geometric progression. Each viewmode has a different common ratio, which is:

• Desktop large view: Type scale ratio = 1.414
• Laptop & Desktop regular view: Type scale ratio = 1.333
• Phone & Tablet: Type scale ratio = 1.2

For example, on mobile view, heading font size is calculated by:

• Heading 5 font size = body font size * 1.125
• Heading 4 font size = heading 5 * 1.125
• Heading 3 font size = heading 4 * 1.125
• Heading 2 font size = heading 3 * 1.125
• Heading 1 font size = heading 2 * 1.125
• Headline font size = heading 1 * 1.125

Similarly, all font properties are calculated based on selected body font size, following typography formula bellow:

• Line height
  • Body paragraph line height = body font size * 1.5
  • Article paragraph line height = body font size * 1.618
  • Subtext, heading line height = body font size * 1.618
• Paragraph spacing
  • Paragraph Spacing = body font size / 1.5
• Font weight
  • Heading, body font (bold style), subtext (bold style): font weight = 600
  • Body font (regular), subtext (regular): font weight = 400