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

Form Input

The font-size of an <input> should always be 16px or larger. As soon as the font-size is 15px or less, Safari on iOS will zoom into that input.

NameFont-Family📱  Font-Size📱  Line-Height🖥   Font-Size🖥   Line-Height
Hero1Inter, sans-serif52px1.1562px1.15
Hero2Inter, sans-serif42px1.1552px1.15
Hero3Inter, sans-serif32px1.1542px1.15
Heading1Inter, sans-serif30px1.2040px1.20
Heading2Inter, sans-serif22px1.2032px1.20
Heading3Inter, sans-serif18px1.2028px1.20
Heading4Inter, sans-serif16px1.3024px1.30
Heading5Inter, sans-serif14px1.4020px1.40
Heading6Inter, sans-serif12px1.4018px1.40
EyebrowInter, sans-serif16px1.3518px1.15
SubtitleInter, sans-serif18px1.3520px1.35
ButtonInter, sans-serif16px1.0016px1.00
Button BigInter, sans-serif18px1.0018px1.00
LeadInter, sans-serif16px1.3518px1.45
InputInter, sans-serif16px1.0016px1.00
Input BigInter, sans-serif18px1.0018px1.00
StrongInter, sans-serif14px1.5016px1.50
TextInter, sans-serif14px1.5016px1.50
SmallInter, sans-serif12px1.3014px1.30
BlockquoteInter, sans-serif14px1.5018px1.50
CodeRoboto Mono, monospace14px1.5018px1.50

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.
Code - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Typography in Figma
Design ColorsDesign Buttons

Follow the creator

Join the community