Default Body Text
Nunito Sans Light- 20px, 0.05, 1.7
Header / Headline
Bodoni Moda-50px, 0, 1.2- Bold
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Bodoni Moda-50px, 0, 1.2- Bold
I am a Headline for a Hero Section.
I AM A SUBHEADING FOR A SECTION-20
Nulla facilisi. Nullam ut nibh at massa eleifend viverra ac et lectus. Nulla pretium, lectus et interdum vulputate, quam sem maximus nisi, vel imperdiet augue tellus sit amet diam. Vivamus dapibus lorem a ex faucibus, sit amet hendrerit nulla condimentum.
Bodoni Moda-30px, 0, 1.2- Bold
I am a Headline for a Hero Section.
Nulla facilisi. Nullam ut nibh at massa eleifend viverra ac et lectus. Nulla pretium, lectus et interdum vulputate, quam sem maximus nisi, vel imperdiet augue tellus sit amet diam. Vivamus dapibus lorem a ex faucibus, sit amet hendrerit nulla condimentum.
I am a Headline for a Hero Section.
I AM A SUBHEADING FOR A SECTION-18
Header / Headline
-
30-50px
-
Bold or heavier weighted font
Nulla facilisi. Nullam ut nibh at massa eleifend viverra ac et lectus. Nulla pretium, lectus et interdum vulputate, quam sem maximus nisi, vel imperdiet augue tellus sit amet diam. Vivamus dapibus lorem a ex faucibus, sit amet hendrerit nulla condimentum.
-
Text input sizes should be at least 16px
Adjust the size down if…
You need to display more information in mobile widths
There are so few words per line that it feels obnoxious to keep moving your eyes to the next line
You have less than 30 characters per line
​
Adjust the size up if…
Users need to read paragraphs and paragraphs of text
The text feels too small when you view it on mobile (it should be as easy to read as a well-printed book)
​
And remember, your default font size should be used as much as possible:
Body text
Menus
Lists
Form controls (probably)
Labels (maybe)
Sub-Heading-20 px, 0, 1.4- Bold
Default Body Text
-
For interaction-heavy designs, your main font size will be 14-20px
-
For text-heavy designs, your main font size will be 18-24px