Display Text
Display text is typically used only once per webpage; often reserved for the most important text and/or the title of the page. The first line of a page’s hero section will likely be set as display text. Due to its size, display text should only be a few words long.
For style options, we have two size variations for both the Lato and Karbon font, as well as their adjusted sizes for mobile displays.
Display Sans 1
.lb-type-display-sans-1 
Hello, world!
Display Serif 1
.lb-type-display-serif-1
Hello, world!
Display Sans 2
.lb-type-display-sans-2
Hello, world!
Display Serif 2
.lb-type-display-serif-2
Hello, world!
Headline Text
Headline text is meant to define the different sections of a webpage. This attention-demanding header text allows users to interpret a section’s content easily. Headline text should span a sentence long.
For style options, we have two size variations for both the Lato and Karbon font, as well as their adjusted sizes for mobile displays.
Headline Sans 1
.lb-type-headline-sans-1
The quick brown fox jumps over the lazy dog.
Headline Serif 1
.lb-type-headline-serif-1
The quick brown fox jumps over the lazy dog.
Headline Sans 2
.lb-type-headline-sans-2
The quick brown fox jumps over the lazy dog.
Headline Serif 2
.lb-type-headline-serif-2
The quick brown fox jumps over the lazy dog.
Subtitle Text
The purpose of subtitle text is to break up large amounts of content within a section. Subtitle text can be useful when paired with headline text to provide even more hierarchal content structure; or it can be used for unique layouts such as the headers of icon columns or tables. Subtitles should be limited to only one or two sentences.
Subtitle 1
.lb-type-subtitle-1
The quick brown fox jumps over the lazy dog.
Subtitle 2
.lb-type-subtitle-1
The quick brown fox jumps over the lazy dog.
Paragraph Text
Paragraph text is meant for large amounts of text meant to be read over an extended period of time. The bulk of a page’s content will likely be paragraph text, so ease of readability is key.
Paragraph text comes in three size variations: large, medium, and small. Depending on the length of text, you may want want to opt for a larger or smaller variant if the text is longer or shorter, respectively.
Paragraph Large
.lb-type-para-lg
Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Paragraph Medium
.lb-type-para
Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Paragraph Small
.lb-type-para-sm
Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Utility Text
Utility text refers to the miscellaneous text styles needed to design certain components.
Caption
.lb-type-caption
Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Overline
.lb-type-overline
Example of overline text
Blockquote
.lb-type-blockquote
Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Button (Large)
.lb-type-button-lg
Example of button text
Button (Medium)
.lb-type-button
Example of button text
Button (Small)
.lb-type-button-sm
Example of button text
