# Typography

The quality of your typography determines a lot. Magic comes with several customisable text formats, each made to integrate well with any website.

## Default text styles

For all typography, Magic uses the 'Noto' font by Google. In some instances, the font weight is changed to achieve a more appropriate look. Both the 'Noto Regular' and 'Noto Thin' fonts are used. Magic makes default tags (e.g. h1, h2, p) look like this:

# Heading 1 (h1)

## Heading 2 (h2)

### Heading 3 (h3)

#### Heading 4 (h4)

##### Heading 5 (h5)

###### Heading 6 (h6)

Paragraph (p)

These require no additional mark-up, just the normal tags as shown above.

## Headers

Magic also has special headers, sub-headers, 'trailers' and separators for pages:

# Header

## Sub-header

Trailer - Lorem ipsum dolor sit amet.

    <h1 class="header">Header</h1>
    <h2 class="sub-header">Sub-header</h2> <!-- Does not have to be h2 -->
    <p class="trailer">Trailer - Lorem ipsum dolor sit amet</p>
    <hr class="separator">

These are intended to be used at the top of an informational page (e.g. documentation!) to introduce the page's content.

## Links

Magic does not style <a> tags by default. Without any class names, a link simply looks like the browser default: Click me!. However, in most cases links look nicer with Magic styles. They make them look clearly clickable, and make the stand out from text: Click me!. To do this, simply add the link class to any <a> tag:

    <a href="#" class="link">Click me!</a>

You can also make other types of links:

I am capitalized

    <a href="#" class="link capitals">

I am underlined

    <a href="#" class="link lined">

I am capitalized AND underlined

    <a href="#" class="link lined capitals">

## Secondary text

Magic also has faded secondary text, designed to go directly after any primary heading:

### Primary Secondary

    <h3>Primary <span class="mute">Secondary</span></h3>

## Important text

Make a paragraph section seem more important by adding one of the following classes:

I am very important

I am very important

I am very important

I am very important

    <p class="important-1">I am very important</p>
    <p class="important-2">I am very important</p>
    <p class="important-3">I am very important</p>
    <p class="important-4">I am very important</p>

## Blockquotes

Magic also has standard support for blockquotes:

> Big fancy blockquote.

This uses the standard blockquote tag, with no extra classes.

    <blockquote>
      Big fancy blockquote.
    </blockquote>

### Source

Magic also allows you to cite a source:

> A very interesting quote. by Interesting Person

    <blockquote>
      A very interesting quote.
      <cite title="Source">by Interesting Person</cite>
    </blockquote>

### Centered

Blockquotes can be center-aligned too. You need to use the center class.

> Center aligned, fancy line changes. Interesting Person

    <blockquote class="center">
      Center aligned, fancy line changes.
      <cite title="Source">Interesting Person</cite>
    </blockquote>

### Right-aligned

They can also be right-aligned:

> Right aligned. Obvious line changes. Interesting person

    <blockquote class="right">
      Right aligned. Obvious line changes.
      <cite title="Source">Interesting person</cite>
    </blockquote>

## Abbreviations

Magic also supports the abbr tag:

HTML

Navbar

    <p><abbr title="Hypertext Markup Language">HTML</abbr></p>
    <p><abbr title="Navigation Bar">Navbar</abbr></p>

## Tables

Magic comes with tables, which can optionally be made responsive:

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>John</td>
          <td>Smith</td>
          <td>37</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>John</td>
          <td>Doe</td>
          <td>90</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Jane</td>
          <td>Doe</td>
          <td>21</td>
        </tr>
      </tbody>
    </table>

### Dark table

You can make the entire table darker, by adding the dark class:

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

    <table class="table dark">
      ...
    </table>

##### Individual dark parts

You can also make individual sections of the table dark:

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

You simply need to add class="dark" to any section of the table. The border colors will change automatically.

### Zebra stripes

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

    <table class="table table-zebra">
      ...
    </table>

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | Doe | 90
3 | Jane | Doe | 21

    <table class="table dark table-zebra">
      ...
    </table>

### Bordered

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | 90
3 | Jane | Doe | 21

    <table class="table table-bordered">
      ...
    </table>

ID | First name | Last name | Age
--- | --- | --- | ---
1 | John | Smith | 37
2 | John | 90
3 | Jane | Doe | 21

    <table class="table table-bordered dark">
      ...
    </table>

### Responsive table

To make a table responsive, place it inside a `<div class="table-responsive">`:

Header | Header | Header | Header | Header | Header | Header | Header | Header | Header
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell