Font Type Face

Type-faces

Ruparupa proposed primary typeface is Quicksand — a robust typeface with legible numbers that renders well at all sizes. It is soft and friendly, yet plain enough to get out of the way and blend in with the content.
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 
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">

The quick brown fox jumps over the lazy dog

<p class="font-size-xxxl">...</p>   <h1>...</h1>

The quick brown fox jumps over the lazy dog

<p class="font-size-xxl">...</p>   <h2>...</h2>

The quick brown fox jumps over the lazy dog

<p class="font-size-xl">...</p>   <h3>...</h3>

The quick brown fox jumps over the lazy dog

<p class="font-size-l">...</p>  

The quick brown fox jumps over the lazy dog

<p class="font-size-m">...</p>  

The quick brown fox jumps over the lazy dog

<p class="font-size-s">...</p>  

The quick brown fox jumps over the lazy dog

<p class="font-size-xs">...</p>  

The quick brown fox jumps over the lazy dog

<p class="font-size-xxs">...</p>  

Font Weight

There are two font weights available to use — Bold, Regular. These can be applied with .bold and for Regular is default set.

Aa.

Quicksand Bold

<p class="bold">...</p>  

Aa.

Quicksand Regular

<!-- Default font set -->  

Line Spacing

We use single 30px line spacing as our text paragraph spacing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus enim elit, quis volutpat ipsum ultricies id. Integer tincidunt sollicitudin tortor at imperdiet. Curabitur dictum dui vel nunc pharetra venenatis. Proin nisi turpis, iaculis id condimentum nec, tincidunt nec dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam neque eros, dignissim sit amet urna at, posuere pretium ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin quis tempus enim, non sagittis justo. Nulla sit amet augue ut eros interdum pretium laoreet et purus. Suspendisse fermentum felis a risus fermentum vulputate. Sed varius condimentum elit at aliquet. Aliquam tristique nunc varius mi rhoncus hendrerit. Nulla blandit nulla vitae nunc condimentum laoreet. Nunc faucibus augue a euismod euismod. Suspendisse vestibulum interdum erat, nec semper massa gravida sed. Sed ac porttitor ipsum. Ut tempus, arcu ut euismod pellentesque, massa est commodo erat, a congue quam odio eget metus. Duis mauris nibh, dictum vel lacus dapibus, laoreet aliquam sem. Aliquam vehicula vestibulum quam ut fringilla. Aliquam eros dui, accumsan in molestie ac, molestie at nibh. Cras sed arcu sem. Suspendisse velit lectus, lobortis sed est eu, tristique viverra velit. Mauris luctus ultricies varius. Vivamus sagittis finibus turpis id molestie. Nulla nisl risus, luctus sit amet ullamcorper tempus, scelerisque pharetra risus. Aenean bibendum quam at urna pulvinar dignissim. Morbi quis pretium sapien. Sed venenatis neque quis arcu venenatis porttitor. Etiam mollis mollis quam, sed imperdiet metus porta at. Aenean semper, ex at cursus commodo, dolor arcu pharetra neque, id sodales odio odio at eros. Nam ornare arcu quis augue volutpat, vel vehicula elit commodo. Phasellus porta dui sed diam ornare, eu pretium justo interdum. Etiam aliquam ante a neque volutpat, pulvinar auctor metus lobortis. Etiam ultricies posuere turpis eget convallis. Aliquam et nibh feugiat dui lacinia posuere. In hac habitasse platea dictumst.

<p>...</p>