Typography

Examples and documentation for typography, one of the most important design elements of an application.

Inkline provides you with basic elements, typography, and link styles. It uses a native font stack that selects the best font family for each OS and device. The base font size is 1rem, so visitors can customize their font size as needed when zooming.

When more control is needed, you should check out the textual utility classes. Each font size, style and weight also has a corresponding helper class to style other elements the same.

Headings

All HTML headings, <h1> through <h6>, have their size calculated based on the specified $font-size-base.

h1. Inkline heading

h2. Inkline heading

h3. Inkline heading

h4. Inkline heading

h5. Inkline heading
h6. Inkline heading
<h1>h1. Inkline heading</h1>

<h2>h2. Inkline heading</h2>

<h3>h3. Inkline heading</h3>

<h4>h4. Inkline heading</h4>

<h5>h5. Inkline heading</h5>

<h6>h6. Inkline heading</h6>

You can use helper classes to achieve heading styles. Classes .h1 through .h6 are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Inkline heading
h2. Inkline heading
h3. Inkline heading
h4. Inkline heading
h5. Inkline heading
h6. Inkline heading
<div class="h1">h1. Inkline heading</div>

<div class="h2">h2. Inkline heading</div>

<div class="h3">h3. Inkline heading</div>

<div class="h4">h4. Inkline heading</div>

<div class="h5">h5. Inkline heading</div>

<div class="h6">h6. Inkline heading</div>

Displays

If you need something larger than headings, you can use displays, .d1 through .d6 are available.

d1. Inkline display
d2. Inkline display
d3. Inkline display
d4. Inkline display
d5. Inkline display
d6. Inkline display
<div class="d1">d1. Inkline display</div>

<div class="d2">d2. Inkline display</div>

<div class="d3">d3. Inkline display</div>

<div class="d4">d4. Inkline display</div>

<div class="d5">d5. Inkline display</div>

<div class="d6">d6. Inkline display</div>

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Inline Text Elements

Inkline provides basic styling for all common HTML5 inline text elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

<p><del>This line of text is meant to be treated as deleted text.</del></p>

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

<p><u>This line of text will render as underlined</u></p>

<p><small>This line of text is meant to be treated as fine print.</small></p>

<p><strong>This line rendered as bold text.</strong></p>

<p><em>This line rendered as italicized text.</em></p>

To avoid any unwanted semantic implications that the tags would bring, .mark and .small classes are also available to apply the same styles as <mark> and <small>.

While not shown above, you can also use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without adding additional semantics, while <i> is mostly for voice, technical terms, etc.

Text Utilities

You can change text alignment, transform, style, weight, and color with text utilities and color utilities.

Text Alignment

You can easily realign text to components with text alignment classes.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

This text is left aligned.

This text is centered.

This text is right aligned.

<p class="_text:justify">
    Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>

<p class="_text:left">This text is left aligned.</p>

<p class="_text:center">This text is centered.</p>

<p class="_text:right">This text is right aligned.</p>

Text Wrapping

You can easily realign text to components with text alignment classes.

This text should overflow the parent.
<div class="_text:nowrap" style="width: 8rem;">
    This text should overflow the parent.
</div>

Responsive Utilities

You can align, wrap or truncate text responsively for any given xs, sm, md, lg, or xl breakpoint by adding the breakpoint suffix:

This text is centered on extra-small screens.

This text is centered on small screens.

This text is centered on medium screens.

This text is centered on large screens.

This text is centered on extra-large screens.

<p class="_xs:text:center">This text is centered on extra-small screens.</p>

<p class="_sm:text:center">This text is centered on small screens.</p>

<p class="_md:text:center">This text is centered on medium screens.</p>

<p class="_lg:text:center">This text is centered on large screens.</p>

<p class="_xl:text:center">This text is centered on extra-large screens.</p>

Abbreviations

The HTML <abbr> element for abbreviations and acronyms is styled to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

attrHTML
<abbr title="attribute">attr</abbr>

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Blockquotes

To quote blocks of content from another source within your document, wrap <blockquote class="blockquote"> around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote -center">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote -right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

To enumerate a sequence of elements, you can use lists. Inkline provides you with multiple variations to achieve your target design.

Unordered Lists

When enumerating elements in no specific order, use an unordered list.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Ordered Lists

When enumerating elements in a specific order, use an ordered list.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ol>

Unstyled Lists

To remove the default list-style and margin on list items, use the -unstyled modifier. This applies to immediate children list items only, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
<ul class="list -unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
</ul>

Inline Lists

Remove a list’s bullets and apply some light margin using the -inline list modifier.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list -inline">
    <li>Lorem ipsum</li>
    <li>Phasellus iaculis</li>
    <li>Nulla volutpat</li>
</ul>

Description Lists

Remove a list’s bullets and apply some light margin using the -inline list modifier.

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Fusce dapibus
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row">
    <dt class="column -sm-3">Description lists</dt>
    <dd class="column -sm-9">A description list is perfect for defining terms.</dd>

    <dt class="column -sm-3">Euismod</dt>
    <dd class="column -sm-9">
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
    </dd>

    <dt class="column -sm-3">Malesuada porta</dt>
    <dd class="column -sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

    <dt class="column -sm-3">Fusce dapibus</dt>
    <dd class="column -sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

    <dt class="column -sm-3">Nesting</dt>
    <dd class="column -sm-9">
        <dl class="row">
            <dt class="column -sm-4">Nested definition list</dt>
            <dd class="column -sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
        </dl>
    </dd>
</dl>

Configuration

To learn more about configuring the design of your application’s typography, please make sure you follow the Global Variables section of the design system documentation.