Typography In Bermuda

Bermuda uses two fonts. Playfair Display is used for headings and Inter is used for regular text. Here is an example of headings.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
                      
                        <h1>Heading h1</h1>

                        <h2>Heading h2</h2>

                        <h3>Heading h3</h3>

                        <h4>Heading h4</h4>

                        <h5>Heading h5</h5>

                        <h6>Heading h6</h6>

Different Texts Classes

Apart from the headings Bermuda also provides some special classes for text as well. Following formats of text can be used easily using these pre-defined text classes.

I am text-1 class.

I am text-2 class.

I am text-3 class.

I am text-4 class.

I am text-5 class. 

                      
                        <p class="text-1">
                            I am text-1 class.
                          </p>
                          <p class="text-2">
                            I am text-2 class.
                          </p>
                          <p class="text-3">
                            I am text-3 class.
                          </p>
                          <p class="text-4">
                            I am text-4 class.
                          </p>
                          <p class="text-5">
                            I am text-5 class.
                          </p>

Bold Text Classes

For bold text also Bermuda provides pre-defined classes. Here is the table showing classes for font-weight.

Classname Font Weight
bold-sm font-weight: 300;
bold-md font-weight: 400;
bold-lg font-weight: 600;
bold-xl font-weight: 700;

letter-spacing: 0.01rem;
bold-xxl font-weight: 900;

letter-spacing: 0.05rem;

That's it for typography. Combination of these typography classes can create beautiful texts.

  Spacing
Utility