Fonts

Ink offers you a simple and elegant base style for text with a clear hierarchy and flexible, generic styling for all types of typographical composition you may need.

Ink's typography is designed to create a strong hierarchy with basic styles. We distribute the open source Ubuntu font family for a modern fresh look, but you can opt for non-webfont solutions. Let's see how you can customize your font choice and we'll also throw in some advice on font stacks.

Customizing typefaces

Since typography is such an integral part of how you communicate with your audience, customizing font choice is paramount. Of course, you can use Ink as-is, with the Ubuntu font, but chances are, you'll want to change that.

To do that, you can add your custom CSS file, as explained in Getting started, and add the following rule:

Code

body {
  font-family: font1, font2, font3; <!--Your font stack here-->
}                

If you want, you can also edit the __typography.less file in the ./less/config/ folder and alter these values:

Code

// sans-serif font stack
@sans-serif-font-stack: Ubuntu, Arial, sans-serif;                

Ubuntu

Ink's default font stack starts with the Ubuntu webfont. Make sure you can serve up the font files from your server, they are free to use and redistribute. If you can't, it's ok, the stack will default to Arial, then Helvetica, and finally, the system's default sans-serif. The stack is:

font-family: Ubuntu, Arial, Helvetica, Sans-serif;

Sans-serif

If you prefer a system font, sans-serif option, change the font-family option to font-family: Sans-serif;

Serif font

For a serif option, we went with Georgia, which is readily availabe and quite versatile. We suggest you simply use font-family: Georgia, Serif;

Tip You may have noticed we went with very basic font-family declarations for the serif and sans-serif options, that just makes your life easier by defaulting to the user agent fonts and potentially serve up the most adequate font for the job in each system. Simplifying this will probably save you headaches down the road. Of course, if you have particular typography needs, feel free to experiment and configure the font-family as you see fit.

Headings

Headings are essential for defining your blocks of text. Use your <h1> for a site-wide identifier, such as the logo, use the <h2> as page title, and try to keep it to a single <h2> per page, and then build your hierarchy of blocks using <h3> - <h6>.

Example

Ink defines default font-size, line-height and margins for each heading level to cleanly match the body text and maximize readability.

Body & Hypertext

Body text is the most basic unit of text you can define. Always use <p> for your paragraphs and Ink takes care of font-size, line-height and proper margins.

Emphasis

For emphasis use either <em> or <i> to obtain italicized type and <strong> or <b> to obtain bold type. If you need further emphasis, the <mark> HTML5 tag renders a simple text highlight.

Examples

Hypertext

Hypertext is the fundament of the web. Ink renders all four states of link text as can be seen on the example below. Simply use the anchor, <a> tag.

Examples

To customize these colors to match your design, either set up your custom CSS or edit the appropriate __colors.less file in the ./less/config/ folder, and change these values:

Code

// LINKS
@link-color                 : #0069D6;
@link-visited-color         : #808080;
@link-active-color          : darken(red,5%);
@link-hover-color           : #007ED5;
@link-focus-color           : @link-color;                

Notes

If you need to add side notes to your text, apply the utility class .note to your paragraphs to get smaller, faded text as in the example below.

Example

Lists

There are four basic list styles defined in Ink, which correspond to the most widely used HTML list formats and also include an unstyled list format.

Unordered List

<h4>Ingredients</h4>
<ul>
   <li>Two fresh avocados</li>
   <li>Two ripe limes</li>
   <li>An onion</li>
   <li>Parsley</li>
</ul>                        

Ordered list

<h4>Instructions</h4>
<ol>
   <li>Grill the chicken</li>
   <li>Pour into tortilla</li>
   <li>Add guacamole, sour cream and cheese</li>
   <li>Roll tortilla and serve</li>
</ol>                        

Definition list

<h4>Definitions</h4>
<dl>
   <dt>Avocado</dt>
   <dd>Pear-shaped fruit native to Central Mexico.</dd>
   <dt>Guacamole</dt>
   <dd>An avocado-based sauce that originated with the Aztecs in Mexico.</dd>
</dl>                        

Unstyled list

<h4>Stuff</h4>
<ul class="unstyled">
   <li>Carnitas</li>
   <li>Jalapeno peppers</li>
   <li>Sour cream</li>
   <li>Pico de gallo</li>
</ul>                        

Utility Classes

Text size

Although Ink is built for out-of-the-box readability there are always situations in which you need to control text-size for a particular block. For that, Ink offers three simple classes, .small .large and .extralarge that, when added to any element, will change the text-size (and only the text-size), as per the examples below.

Example

In case you're not familiar with em units, be aware that these are relative units, which means that 1.2 em is not a fixed size, but a size which is 1.2 "units" bigger than your original size. This means that if you apply .large to a <p> or to an <h2> you will always get text that is 1.2 times larger than the default size for that element.

Font family

You can easily configure the adequate font-stack for your website, but in a pinch, you can use simple Ink classes to switch to a serif or sans-serif typeface in any specific block of text.

Simply add the .serif or the .sans classes to a block of text to quickly switch to either family. The font-stacks can, of course, be editted in the appropriate LESS file.

Note Typography is primordial to the success of your website as it is an essential part of getting your written content across to your readers, always make informed typography choices and only resort to 'hacking' your choice of font face in exceptional situations.

Color coding

You can use Ink's utility classes .info, .warning, .caution and .success on html elements like headings, paragraphs, lists, mark, code, etc., to quickly style those elements using a basic color code that can greatly aid in adding meaning to your content.

Use the classes to obtain a color background with white text or use the extra .invert class to write colored text on transparent background.

Examples

Labels

You can easily use these utility classes to label sections of highlighted text. Simply create an inline level element with the class .ink-label and then add one of the utility classes to color code your inline label. This way, you can easily add a success message post a warning emphasize a particularly relevant information or display an error message.

We suggest you do not use punctuation before or after labels, but instead, precede and succeed with spaces, although your mileage may vary with the amount of consecutive labels you use.

Tip The tips you see throughout this site use ink labels with the .info class, same goes for bits of code, whereas examples, use .success.

Badges

Another utility class Ink gives out of the box is the good ol' badge. So if you need to add a badge to any element, just use the class .ink-badge in any inline element such as a <span>.

For color coding use the classes .black, .blue, .green, .grey, .orange, .red, or .white.

Code

<span class="ink-badge black">2</span>

Examples One of the most common usecases is the menu update badge.

Please refer to the navigation section for further reading on how to build a menu.

Additional elements

These elements allow you to compose specific types of text, such as addresses or quotes. Use the example code for quick recipes that work.

Abbreviations

For abbreviations, simply use the HTML <abbr> tag, like so:

Code

<p>Ink was entirely developed with text editors, no <abbr title="What You See Is What You Get">WYSIWYG</abbr> software was harmed.</p>

Example

Block quotes

For block quotes, use the <blockquote> element, with an optional <cite> element to contain the source name, like so:

Code

<blockquote>
<p>You can't always get what you want.</p>
<p><cite>Jagger & Richards</cite>, 1969</p>
</blockquote>                

Example

Addresses

You can use the <address> element to contain address elements, such as a name, street, postal code. Use headings, paragraphs and line-breaks to compose your address.

Code

<address>
<h6>SAPO</h6>
<p>Av. Fontes Pereira de Melo, 40<br>1050 Lisboa</p>
</address>

Example