Typography

Set of default styles for standard elements and properties.

By default, Garden uses 16px for the default-font-size variable and all the typography classes/tags are sized with rem.

In case you use Garden CSS components individually (bundling them with PostCSS) and want to set your own font size, you can provide a different value for the $default-font-size variable.

We provide both markup tags and classes in order to handle text styling with flexibility.

For more info about setting your own typography, you can check out our scaffolding section.

Headings

As an alternative to using <h[1-6]> tags, you can use .heading-[1-6] classes to get the same style.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

  <div class="heading-1">Heading 1</div>
  <div class="heading-2">Heading 2</div>
  <div class="heading-3">Heading 3</div>
  <div class="heading-4">Heading 4</div>
  <div class="heading-5">Heading 5</div>
  <div class="heading-6">Heading 6</div>

Paragraphs

Instead of using the tag , you can use the .paragraph class.

Paragraph class

  <div class="paragraph">Paragraph class</div>

Links

Instead of using the tag <a>, you can use the .link class.

Link

  <div class="link">Link</div>

Inline text

Instead of using the tags , , , , , you can use the .strong, .italic, and .underlined classes.

strong

italic

underlined

  <p class="strong">strong</p>
  <p class="italic">italic</p>
  <p class="underlined">underlined</p>

Text transformation

capitalized text

  <p class="capitalize">capitalized text</p>

uppercase text

  <p class="uppercase">uppercase text</p>

LOWERCASE TEXT

  <p class="lowercase">LOWERCASE TEXT</p>

Text alignment

Left alignment

  <p class="align-left">Left alignment</p>

Right alignment

  <p class="align-right">Right alignment</p>

Center alignment

  <p class="align-center">Center alignment</p>

This is supposed to be a justified paragraph and it needs to be long enough so you will notice that it is really a justified paragraph. With that this block will not look the same as the left aligned paragraph showed at the beginning of this section, which would seem like we are trying to deceive you.

  <p class="align-justify">
      This is supposed to be a justified paragraph and it needs to be long enough so you will notice that it is really
      a justified paragraph. With that this block will not look the same as the left aligned paragraph showed at the
      beginning of this section, which would seem like we are trying to deceive you.
  </p>

No wrap

  <p class="align-nowrap">No wrap</p>

CSS