HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.
font-size: 5rem; (80px)
line-height: 6rem;
font-size: 4.5rem; (72px)
line-height: 5rem;
font-size: 3.5rem; (56px)
line-height: 4rem;
font-size: 2.5rem; (40px)
line-height: 3rem;
font-size: 1.75rem; (28px)
line-height: 2rem;
font-size: 1rem; (16px)
line-height: 1.25;
Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.
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.
font-size: 1.5rem; (24px)
line-height: 2rem;
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.
font-size: 1.25rem; (20px)
line-height: 1.75rem;
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.
font-size: 1rem; (16px)
line-height: 1.4rem;
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.
font-size: 0.875rem; (14px)
line-height: 1.2rem;
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.
font-size: 0.75rem; (12px)
line-height: 1rem;
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.
font-size: not set (resets to base)
line-height: not set
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Paragraph: 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
Lists:
Blockquote: 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
Link inside the rich text element
In the global CSS we are removing the top margin from the first element and the bottom margin from the last element
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
font-size: 1rem;
line-height: 1.5rem;
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
all sides
14rem
top side
14rem
left side
14rem
bottom side
14rem
right side
14rem
all sides
8rem
top side
8rem
left side
8rem
bottom side
8rem
right side
8rem
all sides
5rem
top side
5rem
left side
5rem
bottom side
5rem
right side
5rem
all sides
3rem
top side
3rem
left side
3rem
bottom side
3rem
rigth side
3rem
all sides
2rem
top side
2rem
left side
2rem
bottom side
2rem
right side
2rem
all sides
1.5rem
top side
1.5rem
left side
1.5rem
bottom side
1.5rem
right side
1.5rem
all sides
1rem
top side
1rem
left side
1rem
bottom side
1rem
right side
1rem
all sides
0.5rem
top side
0.5rem
left side
0.5rem
bottom side
0.5rem
right side
0.5rem
all sides
0.25rem
top side
0.25rem
left side
0.25rem
bottom side
0.25rem
right side
0.25rem