• InK
  • Layout
  • Navigation
  • Typography
  • Icons
  • Forms
  • Alerts
  • Tables
  • InK JS
    • UI
    • Core

Typography

Text is the most fundamental content type.

  • Back to Top
  • Fonts
  • Headings
  • Body & Hypertext
  • Lists
  • Utility Classes
  • Additional Elements

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 and choose from three basic font stacks.

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.

Examples

Ubuntu font stack
  • Ubuntu
  • Arial
  • Helvetica
  • Sans-serif
Sans serif font stack
  • Sans-serif
Serif font stack
  • Georgia
  • Serif

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.

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

<h1>Title 1</h1>

<h2>Title 2</h2>

<h3>Title 3</h3>

<h4>Title 4</h4>

<h5>Title 5</h5>
<h6>Title 6</h6>

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.

Hypertext

Hypertext is the fundament of the web. Ink renders all four states of link text as can be seen on the example on the right. Simply use the anchor, <a> tag. You can customize link appearance in the Ink configurator, using your own custom CSS or, if you're a more advanced user, editting the conf.less file.

Notes

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

Emphatic elements

  • Italicized
  • Bold
  • Highlighted

Hyperlinks

  • Normal
  • Visited
  • Active
  • Hover

Note text

This is normal body text.

This is a note.

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

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

Ordered list

<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>
  1. Grill the chicken
  2. Pour into tortilla
  3. Add guacamole, sour cream and cheese
  4. Roll tortilla and serve

Definition list

<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>
Avocado
Pear-shaped fruit native to Central Mexico.
Guacamole
An avocado-based sauce that originated with the Aztecs in Mexico.

Unstyled list

<ul class="unstyled">
   <li>Carnitas</li>
   <li>Jalapeno peppers</li>
   <li>Sour cream</li>
   <li>Pico de gallo</li>
</ul>
  • Carnitas
  • JalapeƱo peppers
  • Sour cream
  • Pico de gallo

Utility Classes

You can use the InK utility classes .info, .warning, .caution and .success on html elements like headings, paragraphs, lists, mark, code, 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. You can tweak the colors used by each class in the Ink Configurator, your own CSS or the conf.less file.

.info

.warning

.caution

.success

.info.invert

.warning.invert

.caution.invert

.success.invert

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.

Example

  • info
  • warning
  • caution
  • success

Code example

<h6 class="warning">You are approaching your space quota</h6>
<p>Your account offers 20 GB of storage space and you are now using <span class="ink-label info">19.8 GB</span>. Please remove some files or upgrade your account.</p>
<p class="caution invert">Please note, files over quota will not be stored.</p>

Result

You are approaching your space quota

Your account offers 20 GB of storage space and you are now using 19.8 GB. Please remove some files or upgrade your account.

Please note, files over quota will not be stored.

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:

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

Ink was entirely developed with text editors, no WYSIWYG software was harmed.

Block quotes

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

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

You can't always get what you want.

Jagger & Richards, 1969

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.

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

Av. Fontes Pereira de Melo, 40
1050 Lisboa

  • About
  • Changelog
  • Ink's code licensed under MIT, docs under cc-by-nc
sapo.pt

PTC logoPTC - All rights reverved.
SAPO is a trademark and a search engine created at the University of Aveiro.

    Follow SAPO: