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>