Menu

Typography

If you need to have words on your site or app. Then this is the place to find out how they should look!

Headings and such

In general we like to text-transform: uppercase our headings. So we just do that by default. However we know that there will be times when we don't want this so we've made a .lowercase class that you can use to remove the caps. Hot dang!

This is a normal large header

This is a large header

This is a medium header

This is a moderate header

This is a small header
This is a tiny header
<h1>This is a normal large header</h1>
<h2>This is a large header</h2>
<h3>This is a medium header</h3>
<h4>This is a moderate header</h4>
<h5>This is a small header</h5>
<h6>This is a tiny header</h6>

This is a normal large header that has no transform

This is a large header that has no transform

This is a medium header that has no transform

This is a moderate header that has no transform

This is a small header that has no transform
This is a tiny header that has no transform
<h1 class="lowercase">This is a normal large header that has no transform</h1>
<h2 class="lowercase">This is a large header that has no transform</h2>
<h3 class="lowercase">This is a medium header that has no transform</h3>
<h4 class="lowercase">This is a moderate header that has no transform</h4>
<h5 class="lowercase">This is a small header that has no transform</h5>
<h6 class="lowercase">This is a tiny header that has no transform</h6>

Paragraphs

Ahhh, the building blocks of all those sweet messages you want to send. We try make ours pretty easy to read. In fact, you just read one. Wasn't that easy?

<p>(...)</p>

Our serif class is used primary in marketing. We reserve it for callouts on the page and it's usually in a personal, human voice.

<p class="serif">(...)</p>

Subtext, while similar to the serif class can be used to create visual diference.

<p class="subtext">(...)</p>

Anytime we publish the bible on a page we use Charis SIL. It's an amazing cross-language font. And since we are about showing the bible in tons of languages it's pretty important that we get this one right!

<p class="bible-font">(...)</p>

Links

Links are pretty standard stuff, but we do have some color classes that you can apply.

This is a blue link gold link red link and a green link. 

<p>This is a
<a class="blue" href='#'>blue link</a>
<a class="gold" href='#'>gold link</a>
<a class="red" href='#'>red link</a>
and a
<a class="green" href='#'>green link.</a>
</p>

Lists

Sometimes a paragraph just won't cut it. You need to separate those thoughts. In steps lists to the rescue. Here are just a few ways that we define our lists. Today we are fans of sending the bullets to the left of the edge and letting the list items line up with the rest of the headings, paragraphs, and other items. Mark Boulton explains this in detail.

Unordered Lists

  • List Item One
  • List Item Two
    • Nested
    • Nested
  • List Item Three
  • List Item Four
  • List Item Five
<ul>
<li>List Item One</li>
<li>List Item One</li>
</ul>

Blockquotes

Sometimes you need to say something that someone else already said. That's ok, "great artists steal" right? There are several philosophies on how to semantically mark up a quote. The following seemed the most straight forward to us.

Good Artists Copy; Great Artists Steal - Some Smart Person 
<blockquote>Good Artists Copy; Great Artists Steal <cite>Some Smart Person</cite></blockquote>
Good Artists Copy; Great Artists Steal - Some Smart Person 
<blockquote class="human-quote">Good Artists Copy; Great Artists Steal <cite>Some Smart Person</cite></blockquote>

General Guidelines & Recommendations

We really try hard to keep line widths at 45-75 characters per line. CSS Tricks has a great tool that can help you do just that!

We use ems. And think that you should too. We don't set a base browser font size because we feel that the whole concept of responsiveness is to allow our sites and apps to adjust and "respond" to the devices that they are on. And this includes users font size settings.