“Typography” Design Component

Design: zeplin.

Fonts

Merriweather

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 UI Kit as the body text typeface.

Available variants:

Regular 400
Regular 400 italic
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 3

Link: Source Sans 3 @ Google fonts.

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

Available variants:

Regular 400
Regular 400 italic
Bold 700

Usage

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

Glyphs

Source Code Pro

Link: Source Code Pro @ Google fonts.

Source Code Pro is the monospace typeface of the IxDF UI Kit. It is designed to work well and harmonize with Source Sans 3.

Available variants:

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 3 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 correlate 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 class="blockquote">Block Quote Text</blockquote>
<div class="quote">Pull Quote text</div>