Typography
Our typography (and general size) system is fluid & responsive, it automatically scales and adapts to viewports. To achieve that, we are using a combination of two things: rem units instead of pixels, and multiples of 4. Essentially, think of our base unit as 20px = 1rem = our default text size.
12px=.6rem16px=.8rem20px=1rem24px=1.2rem32px=1.6rem48px=2.4rem64px=3.2rem128px=6.4rem
You can simply divide by 20 to quickly convert any pixel value in rem, and Webflow supports math in all fields!
Let's take 12px: you can simply type out 12/20rem in any field, it will automatically divide 12 by 20 and output the result as... .6rem!
Our heading scale ranges from H1 to H5. Here are a few tips:
- Always use headings in a descending order: H1 → H2 → H3 ...
- You can use classes to style a heading to another heading's style. E.g: give a H2 a class of H3.
Jumbo
Headline
Heading one
Heading one
Heading two
Heading two
Heading three
Heading three
Heading four
Heading four
Heading five
Heading five
Heading six
Heading six
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A rich text element is a powerful, all-in-one content block that can contain everything from headings to paragraphs, lists, images, captions, links...
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
/* Some inline code */
<style>
.glass:has(.water)::after {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: blue;
}
</style>Block quote
Quoted Person, CEO at Lattice
- Item 1
- Item 2
- Item A
- Item B
By submitting your information, you agree to Lattice's Terms of Service and Privacy Policy. You can opt out anytime.
In this rich text, lists are a bit special:
- As you can see, they're check lists!
- Whenever you want a rich text with checks, use this variant
- Useful for takeaway blocks, recaps, features...
In this rich text, lists are a bit special:
- As you can see, they're check lists!
- Whenever you want a rich text with checks, use this variant
- Useful for takeaway blocks, recaps, features...
Label , Eyebrow and Tag elements are always used above headings and paragraphs as a way to introduce the content to come.
Latticon is a custom icon font we made for our web iconography. It's a WIP and we keep growing its library of icon as our needs grow. To use it, simply use one of the following text element and give it a class of Latticon, or set the font family of its parent to Latticon.
See how these glyphs — ⯇⯈⯅⯆✅❎▶⏸🔄⭐“” — are displayed with Latticon:
Gradient
Gradient
Gradient
Gradient
Gradient
Gradient
Add a characters attribute to a text element with a value between 10 and 60, to inform the maximum amount of characters per line for this text.
Add a lines attribute to a text element with a value between 1 and 6, to inform the maximum amount of characters per line for this text. Ellipsis will automatically be added if text gets cropped.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor