Basic principles

Ink defines a lightweight set of rules to control the way text elements are presented and in some cases extends basic HTML styling.

As of version 3.0.0 we're using Christian Robertson's Roboto font family as our suggested typeface. The Roboto font family was designed for the Android operating system and includes sans-serif, condensed and slab-serif styles in several weights. Sadly, this also means that we're no longer bundling the Ubuntu font family.

Unlike the other components in Ink, Typography does not require specific markup, and is enabled by default.

CSS CLASSES
Class name	Description
`fw-100` `fw-300` `fw-400` `fw-500` `fw-700` `fw-900`	Sets font weight and defines font-family as Roboto.
`condensed-300` `condensed-400` `condensed-700`	Sets font weight and defines font-family as Roboto Condensed.
`slab-100` `slab-300` `slab-400` `slab-700`	Sets font weight and defines font-family as Roboto Slab.
`sans`	Set font-family to the sans-serif font stack
`serif`	Set font-family to the serif font stack
`monospace`	Set font-family to the monospaced font stack
`condensed`	Set font-family to the condensed font stack
`slab`	Set font-family to the slab serif font stack
`small`	Sets font-size to 75% of the base font-size
`medium`	Sets font-size to 85% of the base font-size
`large`	Sets font-size to 120% of the base font-size
`extralarge`	Sets font-size to 145% of the base font-size
`uppercase`	Transforms character to upper case
`lowercase`	Transforms character to upper case

Fonts

Font Awesome

Ink continues to rely on Font Awesome and its vast icon collection. Head over to their website to check the collection and documentation.

Roboto

Css classes:
fw-100
fw-300
fw-400
fw-500
fw-700
fw-900
condensed-300
condensed-400
condensed-700
slab-100
slab-300
slab-400
slab-700

As previsouly mentioned we're now using the Roboto font-family, so let's get acquainted with it:

Demo

Roboto

All the weight variants have italics.

Roboto light

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.

Roboto thin

Roboto regular

Roboto medium

Roboto bold

Roboto black

Demo

Roboto Condensed

Roboto Condensed light

Roboto Condensed regular

Roboto Condensed bold

Demo

Roboto Slab

Roboto Slab thin

Roboto Slab light

Roboto Slab regular

Roboto Slab bold

Headings and paragraphs

Ink provides font size and margin relationships for headings and paragraphs. That results in an even vertical rhythm when setting text.

Demo

MOBY DICK

CHAPTER 1. Loomings.

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.

Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?

Lists

Css classes:
unstyled

Styling is also provided for html list elements. Adding the unstyled CSS class to an unordered list will remove bullets and indentation.

Demo

Ordered list

List item
List item
List item
List item
List item
List item
List item

Demo

Unordered list

List item
List item
List item
List item
List item
List item
List item

Demo

Unstyled list

List item
List item
List item
List item
List item
List item
List item

Demo

Definition list

Definition term: Definition text
Definition term: Definition text
Definition term: Definition text

Hypertext

Hypertext is the foundation of the web. Ink defines styling for the <a> element states:

Demo

Emphasis

You can use native HTML elements to denote the importance to a piece of text:

Demo

This is some italic text, using <em>
This text is bold, using <strong>
This is some highlighted text, using <mark>

Notes, blockquotes and addresses

CSS classes:
note

A paragraph with the note CSS class will create a smaller and lighter colored apearance:

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blockquotes and addresses are also styled:

Demo

Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
Ishmael

Demo

SAPO

Av. Fontes Pereira de Melo, 40
1050 Lisboa

Labels and badges

Css classes:
ink-label
ink-badge
black
white
grey
blue
red
green
yellow
orange

Add the ink-label and one of the color css classes to an text element will create a label like presentation:

Demo

black label white label grey label blue label red label orange label yellow label green label

Badges work the same way but use the ink-badge CSS class:

Demo

99 99 99 99 99 99 99 99

Utility classes

CSS classes:
small
medium
large
extralarge
uppercase
lowercase

Ink provides a few more css classes to handle simple tasks like changing font size. These can be combined with all others:

Demo

I'm an extra large, bold, all caps paragraph.

Code

<p class="extralarge fw-700 uppercase">I'm an extra large, bold all caps paragraph.<p>