Typography

Contents

  1. Get Started
  2. Grid
  3. Containers
  4. Navbars
  5. Positioning
  6. Responsive
  7. Typography
  8. Images
  9. Tables
  10. Buttons
  11. Forms
  12. Callouts
  13. Carousels

Defaults and overriding

The examples below demonstrate Odin's default styling of various HTML elements. It is not recommended that you change styling in the odin.css file itself. Rather, it is recommended you do so in a stylesheet that loads after odin.css. This way, you can upgrade to future releases of Odin without worrying about losing custom styling.

Text

Odin uses a base font size of 18px and a sans-serif font stack. The default text color is almost black (#111). This applies to paragraphs, list items, table data, and pretty much everything else other than headings.

Headings

All 6 heading levels are available. Here is an example of the default styling for each.

Heading 1

 Very dark gray, semibold, 4.0rem (72px)

Heading 2

 Very dark gray, semibold, 2.666rem (48px)

Heading 3

 Very dark gray, semibold, 2.0rem (36px)

Heading 4

 Very dark gray, semibold, 1.5rem (28px)
Heading 5
 Very dark gray, semibold, 1.333rem (24px)
Heading 6
 Very dark gray, semibold, 1.0rem (20px) 
  
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Blockquotes

Blockquotes are indented and given a very light gray border on the left side. The font size is also slightly larger than the base font size.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  
<blockquote>
  <p>Lorem ipsum...</p>
</blockquote>

Citations can be added to blockquotes by wrapping citations in the <cite> tag after the quotation.

Don't believe everything you read on the Internet.

Abraham Lincoln 
  
<blockquote>
  <p>Don't believe everything you read on the Internet.</p>
  <cite>Abraham Lincoln</cite>
</blockquote>

Lists

The only styling applied to lists are minor adjustments to margins and padding to keep consistent spacing with other Odin elements.

  1. List item
  2. List item
  3. List item
  • List item
  • List item
  • List item
  
<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

The list-unstyled class can be used on both orderered and unordered lists to remove numbering/bullets as well as indentation.

  • List item
  • List item
  • List item
  
<ul class="list-unstyled">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Other common text elements

Make text stand out with <b> or <strong> elements. Add emphasis with <i> or <em> elements. You may want to draw attention to text by highlighting it with the <mark> element.

  
Make text <b>stand out</b> or add <i>emphasis</i>.
You may want to <mark>highlight</mark> text.

Text utility classes

De-emphasize text by using the light class.

  
<p class="light">This text is lighter.</p>