code

Typography

We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.

FontFamily

h1, .h1, h2, .h2

font-family: GalanoGrotesqueAlt-Semibold, Helvetica, sans-serif;

h3, .h3, h4, .h4, h5, .h5, h6, .h6

font-family: GalanoGrotesqueAlt-Medium, Helvetica, sans-serif;

Page title

Include no more than one <h1> per page.

Heading h1 or .h1

*.h-subhead

Subheadings

Include no more than one <h2> per page. Use .h* classes to simulate heading styles on any element. Use in conjunction with text helpers for even more customability.

Heading h2 or .h2

Heading h3 or .h3

Heading h4 or .h4

Heading h5 or .h5
Heading h6 or .h6

Sized headings

These headings throw back to pixel sizes of yore but convert them into rems that will scale appropriately based on device size. Use in conjunction with text helpers for even more customability.

Heading .h-48
Heading .h-42
Heading .h-38
Heading .h-32
Heading .h-30
Heading .h-28
Heading .h-24
Heading .h-22
Heading .h-18
Heading .h-16
Heading .h-14
Heading .h-12
Heading .h-10

Responsive headings

Responsive header sizes s-m-l-xl.
Available Sizes in px: 52 48 42 38 36 32 30 28 24 22 20 18 16 14 12 10

Resize Me!

            <div class="h-16 h-s22 h-m30 h-l38 h-xl48">Resize Me!<div>

Basic text

This is paragraph text. Donec id elit non mi porta gravida at eget metus. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. This is a link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Helpers

.text-small or <small>
.text-em or <em>
.text-italic
.text-underline
.text-shadow
.ttu or .text-uppercase
.text-strong or <strong>
.text-thin
.text-light
.text-regular
.text-semibold
.text-bold
.text-boldest

Line Height

.line-height-0

Donec id elit non mi porta gravida at eget metus.
.line-height-s
Donec id elit non mi porta gravida at eget metus.
line-height-sm
Donec id elit non mi porta gravida at eget metus.
.line-height-m
Donec id elit non mi porta gravida at eget metus.
.line-height-l
Donec id elit non mi porta gravida at eget metus.
.line-height-xl
Donec id elit non mi porta gravida at eget metus.

Alignment

These classes are for horizontally aligning content. We have .text-left, .text-right and .text-center


This should be left aligned


This should be right aligned


This should be center aligned

              <div>
                <h5 class="text-left">This should be left aligned</h5>
              </div>
              <div>
                <h5 class="text-right">This should be right aligned</h5>
              </div>
              <div>
                <h5 class="text-center">This should be center aligned</h5>
              </div>

Responsive Alignment

These classes set text alignment for different viewport sizes. We have .stext-left, .stext-right and .stext-center where s can be swapped out for m, l, or xl.

Small screens and up
  • .stext-left
  • .stext-right
  • .stext-center
Medium screens and up
  • .mtext-left
  • .mtext-right
  • .mtext-center
Large screens and up
  • .ltext-left
  • .ltext-right
  • .ltext-center
Extra large screens and up
  • .xltext-left
  • .xltext-right
  • .xltext-center

This should be left aligned on extra large screens and up


This should be left aligned on large screens and up


This should be left aligned on medium screens and up


This should be left aligned on small screens and up


              <div>
                <p class="text-center ltext-left">This should be left aligned on large screens and up</p>
              </div>
              <div>
                <p class="text-center xltext-left">This should be left aligned on extra large screens and up</p>
              </div>

              <div>
                <p class="text-center mtext-left">This should be left aligned on medium screens and up</p>
              </div>
              <div>
                <p class="text-center stext-left">This should be left aligned on small screens and up</p>
              </div>

Flow Text

Toggle flow-text

One common flaw we've seen in many frameworks is a lack of support for truly responsive text. While elements on the page resize fluidly, text still resizes on a fixed basis. To ameliorate this problem, for text heavy pages, we've created a class that fluidly scales text size and line-height to optimize readability for the user. Line length stays between 45-80 characters and line height scales to be larger on smaller screens.

To see Flow Text in action, slowly resize your browser and watch the size of this text body change! Use the button above to toggle off/on flow-text to see the difference!


To use flow-text on a body of text, simply just add the class flow-text to a tag, see the code blow.


            <p class="flow-text">I am Flow Text</p>