Typography

Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site.

Headings #

Use h1-h6 tags to define headers.

Heading 1

On at tolerably depending do perceived. Luckily eat joy see own shyness minuter. So before remark at depart. Did son unreserved themselves indulgence its.

Heading 2

Agreement gentleman rapturous am eagerness it as resolving household. Direct wicket little of talked lasted formed or it. Sweetness consulted may prevailed for bed out sincerity.

Heading 3

Built purse maids cease her ham new seven among and. Pulled coming wooded tended it answer remain me be. So landlord by we unlocked sensible it.

Heading 4

Fat cannot use denied excuse son law. Wisdom happen suffer common the appear ham beauty her had. Or belonging zealously existence as by resources.

Heading 5

In it except to so temper mutual tastes mother. Interested cultivated its continuing now yet are. Out interested acceptance our partiality affronting unpleasant why add.

Heading 6

Esteem garden men yet shy course. Consulted up my tolerably sometimes perpetual oh. Expression acceptance imprudence particular had eat unsatiable.

<h1>...</h1>
...
<h6>...</h6>

Kube supports subheadings. Just put the heading after another one.

Built purse maids cease

Out interested acceptance our partiality affronting unpleasant

<h2>Heading</h2>
<h4>Subheading</h4>

Paragraphs #

The base paragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.

Was drawing natural fat respect husband. An as noisy an offer drawn blush place. These tried for way joy wrote witty. In mr began music weeks after at begin. Education no dejection so direction pretended household do to. Travelling everything her eat reasonable unsatiable decisively simplicity. Morning request be lasting it fortune demands highest of.

<p>...</p>

In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a large lead text or signatures with a small font size .

My solid by stuff first smile fanny. Humoured how advanced mrs elegance sir who. Home sons when them dine do want to. Estimating themselves unsatiable imprudence an he at an.

<p class="is-large">...</p>

My solid by stuff first smile fanny. Humoured how advanced mrs elegance sir who. Home sons when them dine do want to. Estimating themselves unsatiable imprudence an he at an.

<p class="is-big">...</p>

Agreed joy vanity regret met may ladies oppose who. Mile fail as left as hard eyes. Meet made call in mean four year it to. Prospect so branched wondered sensible of up.

<p class="is-small">...</p>

Mr do raising article general norland my hastily. Its companions say uncommonly pianoforte favourable. Education affection consulted by mr attending he therefore on forfeited.

<p class="is-smaller">...</p>

Quotes #

Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.

Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.
<blockquote>...</blockquote>

Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.

— Bender

<blockquote>
    <p>Quotation content</p>
    <p><small>Author attribution</small></p>
</blockquote>

Preformatted #

Preformatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.

Function.prototype.inherits = function(parent)
{
    for (var key in parent.prototype)
    {
        this.prototype[key] = parent.prototype[key];
    }
};
<pre>...</pre>

Feel free to use code tag inside pre.

Function.prototype.inherits = function(parent)
{
    for (var key in parent.prototype)
    {
        this.prototype[key] = parent.prototype[key];
    }
};
<pre><code>...</code></pre>

Inline Elements #

Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.

Example Tag Example Tag
CSS <abbr> Code <code>
Variable <var> Mark <mark>
Shortcut <kbd> Deleted <del>
Italic <i> Emphasis <em>
Highlighted <strong> Bold <b>
xsuperscript <sup> xsubscript <sub>
Small <small> Inserted <ins>
<time>

Modifiers #

Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code. Modifiers can be applied to any tags as inline elements, links or block tags.

Example Modifier
Muted .is-muted
Muted link .is-muted
Black link .is-color-black
Large .is-large
Big .is-big
Small .is-small
Smaller .is-smaller
White-space nowrap .is-nowrap
Highlight .is-highlight
Centered .is-text-center
Left on the mobile .is-text-left-mobile

Figure #

A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into .video-container class.

Images

Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
<figure>
    <img src="...">
    <figcaption>...</figcaption>
</figure>

Video

Journey Through The Ice | National Geographic
<figure>
    <div class="is-video-container">
        <iframe src="..."></iframe>
    </div>
    <figcaption>...</figcaption>
</figure>

Code

Function.prototype.inherits = function(parent)
{
    for (var key in parent.prototype)
    {
        this.prototype[key] = parent.prototype[key];
    }
};
One of the implementations of inheritance
<figure>
    <pre>...</pre>
    <figcaption>...</figcaption>
</figure>

Lists #

Although you most likely will not ever need to do so, you can still nest as many list levels as you like.

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
      • list item 2.2.1
      • list item 2.2.2
    • list item 2.3
    • list item 2.4
  • list item 3
  • list item 4
<ul>
    <li>...</li>
</ul>
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
      1. list item 2.2.1
      2. list item 2.2.2
    3. list item 2.3
    4. list item 2.4
  3. list item 3
  4. list item 4
<ol>
    <li>...</li>
</ol>

Unstyled List

To remove default list styling, use .is-unstyled or wrap to nav tag if it's navigation list of course.

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
  • list item 3
  • list item 4
<ul class="is-unstyled">
    <li>...</li>
</ul>
<nav>
    <ul>
        <li>...</li>
    </ul>
</nav>

Bar List

Sometimes you need to build a list as a row. The class .is-bar will help to do this.

  • item 1
  • item 2
  • item 3
  • item 4
<ul class="is-bar">
    <li>...</li>
</ul>

Definition List

From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.

Term 1
Description 1
Term 2
Description 2
Term 3
Description 3
<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>