Get boba!
boba Version 1.7.2

Typography

Handpicked fonts to make your project stand out.

Clarification

Our website uses the Fira Sans and Muli fonts from Google Fonts.

Learn more about using custom fonts in our customization guide.

Headings

Headings use the Fira Sans font.
Learn more.

Heading 1

Subheading 4

Heading 2

Subheading 5

Heading 3

Subheading 6
<h1 class="header"> Heading 1 </h1>
<h4 class="subheader"> Subheading 4 </h4>

<h2 class="header"> Heading 2 </h2>
<h5 class="subheader"> Subheading 5 </h5>

<h3 class="header"> Heading 3 </h3>
<h6 class="subheader"> Subheading 6 </h6>

Body Text

Body text uses the Muli font.
Learn more.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Font Weight

Easily change the weight and style of your fonts.

Bold

Make your text bold.
I'm bold text! 
<span class="bold"> I'm bold text! </span>

Normal

Reset your text's weight.
I'm normal text! 
<span class="normal"> I'm normal text! </span>

Thin

Make your text thin.
I'm thin text! 
<span class="thin"> I'm thin text! </span>

Italic

Italicize your text.
I'm italic text! 
<span class="italic"> I'm italic text! </span>

Margins Modifiers

To get the perfect text spacing.

Default Margin

Headings are separated from the text.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3> Heading 3 </h3>

Less Margin

Headings are closer to the text.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3 class="less-margin"> Heading 3 </h3>

No Margin

Headings are even closer to the text.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3 class="no-margin"> Heading 3 </h3>

Text Transforms

For extra stylistic expression.

Capitalized

Capitalize the first letter of each word.

Example header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3 class="capitalize"> Example header </h3>

Uppercase

Make every letter in the string uppercase.

Example Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3 class="uppercase"> Example header </h3>

Lowercase

Make every letter in the string lowercase.

Example Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h3 class="lowercase"> Example header </h3>