• DocumentationDocs

Design Typography

Cherry covers a wide range of typography variations, covering the most common web patterns like headings, subtitles, paragraphs and so on. There are 2 types of typography definitions, one for mobile and one for desktop.

NameFont-Family🖥   Font-Size🖥   Line-Height📱  Font-Size📱  Line-Height
Hero1Inter, sans-serif62px1.1552px1.15
Hero2Inter, sans-serif52px1.1542px1.15
Hero3Inter, sans-serif42px1.1532px1.15
Heading1Inter, sans-serif40px1.238px1.2
Heading2Inter, sans-serif32px1.228px1.2
Heading3Inter, sans-serif28px1.224px1.2
Heading4Inter, sans-serif24px1.322px1.3
Heading5Inter, sans-serif20px1.418px1.4
Heading6Inter, sans-serif18px1.416px1.4
EyebrowInter, sans-serif18px1.1516px1.35
SubtitleInter, sans-serif20px1.3518px1.35
ButtonInter, sans-serif14px112px1
Button BigInter, sans-serif18px116px1
LeadInter, sans-serif18px1.3516px1.35
InputInter, sans-serif14px112px1
Input BigInter, sans-serif18px116px1
StrongInter, sans-serif16px1.514px1.5
TextInter, sans-serif16px1.514px1.5
SmallInter, sans-serif14px1.312px1.3
BlockquoteInter, sans-serif18px1.516px1.5

Demo


Hero1

Hero2

Hero3

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6
EyebrowSubtitleButtonButton BigLeadInputInput Big

Strong - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Text - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Small - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Blockquote - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Typography in Figma
Design ColorsDesign Buttons

Follow the creator

Join the community