IxDF Design System

“Typography” Design Component

Design: zeplin.

Fonts

Merriweather

Link: Merriweather @ Google fonts.

Merriweather is a serif typeface with a unique character that invokes a sense of sophistication and precision. Tall x-height and open counters make this typeface extremely readable. Merriweather is used in the IxDF Design System as the body text typeface.

Available variants:
  1. Regular 400
  2. Regular 400 italic
  3. Bold 700

Usage

<p>Text with Merriweather font</p>
<div class="text-serif">Text with Merriweather font</div>
<p><i>Italic Text with Merriweather font<i></p>
<div class="text-serif italic">Italic Text with Merriweather font</div>
<p><b>Bold Text with Merriweather font</b></p>
<div class="text-serif font-bold">Bold Text with Merriweather font</div>

Glyphs

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư 1 2 3 4 5 6 7 8 9 0 ? ! ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ £ ¥ ¢ : ; , . *

Source Sans Pro

Link: Source Sans Pro @ Google fonts.

Source Sans Pro is a clean and neutral sans-serif typeface. Its open counters create great legibility and readability. In the IxDF Design System, Source Sans Pro is used for headings and user interface labels.

Available variants:
  1. Regular 400
  2. Regular 400 italic
  3. Bold 700

Usage

<div>Text with Source Sans Pro font</div>
<div class="text-sans-serif">Text with Source Sans Pro font</div>
<div><i>Italic Text with Source Sans Pro font<i></div>
<div class="text-sans-serif italic">Italic Text with Source Sans Pro font</div>
<div><b>Bold Text with Source Sans Pro font</b></p>
<div class="text-sans-serif font-bold">Bold Text with Source Sans Pro font</div>

Glyphs

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư 1 2 3 4 5 6 7 8 9 0 ? ! ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ £ ¥ ¢ : ; , . *

Source Code Pro

Link: Source Code Pro @ Google fonts.

Source Code Pro is the monospace typeface of the IxDF Design System. It is designed to work well and harmonize with Source Sans Pro.

Available variants:
  1. Regular 400

Usage

<div class="text-monospace">Text with Source Code Pro font</div>

Glyphs

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư 1 2 3 4 5 6 7 8 9 0 ? ! ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ £ ¥ ¢ : ; , . *

Headings

All headings use Source Sans Pro as its font.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Usage

<h1>Heading 1</h1>
<div class="h1">Heading 1 size text</div>
<h1>Heading 2</h1>
<div class="h2">Heading 2 size text</div>
<h3>Heading 3</h3>
<div class="h3">Heading 3 size text</div>
<h4>Heading 4</h4>
<div class="h4">Heading 4 size text</div>
<h5>Heading 5</h5>
<div class="h5">Heading 5 size text</div>
<h6>Heading 6</h5>
<div class="h6">Heading 6 size text</div>

Type Styles

These are the default style types that we have. Almost all text is written using a combination of this with some margin or color differences.

Headings corelate directly with these styles. where h1 = tera, h2 = giga … an so on.

Tera type style
Giga type style
Mega type style
Kilo type style
Hecto type style
Body type style
UI type style
Centi type style
Milli type style

Usage

<div class="teraTypeFont">Tera type style</div>
<div class="gigaTypeFont">Giga type style</div>
<div class="megaTypeFont">Mega type style</div>
<div class="kiloTypeFont">Kilo type style</div>
<div class="hectoTypeFont">Hecto type style</div>
<div class="bodyTypeFont">Body type style</div>
<div class="UITypeFont">UI type style</div>
<div class="centiTypeFont">Centi type style</div>
<div class="milliTypeFont">Milli type style</div>

Paragraph or body text

Paragraph or body text use Merriweather and have a default bottom margin. They by default have a max width of 672px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus congue est et tristique. Vestibulum ex dui, eleifend eget nisi non, porttitor fermentum mi. Praesent ultricies tristique elit non auctor. Fusce sit amet fringilla libero. Quisque sit amet bibendum dolor. Curabitur bibendum, nulla vel malesuada condimentum, mi

Usage

<p>Text with Paragraph font</p>
<p><i>Italic Text with Paragraph font<i></p>
<p><b>Bold Text with Paragraph font</b></p>

Quotes

Block Quotes

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

The Metamorphosis, Franz Kafka

Pull Quotes

Pull quotes are key phrases pulled from an article’s content.

Usage

<blockquote>Block Quote Text</blockquote>
<div class="quote">Pull Quote text</div>