typography.md

layout	title	permalink
page	Typography	/typography/

Jibe websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields.

Typeface

Lato

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

Examples:

Font Weight 100
"Transform your career site into a recruiting engine"

Font Weight 100 Italic
"Transform your career site into a recruiting engine"

Font Weight 300
"Transform your career site into a recruiting engine"

Font Weight 300 Italic
"Transform your career site into a recruiting engine"

Font Weight Normal 400
"Transform your career site into a recruiting engine"

Font Weight Normal 400 Italic
"Transform your career site into a recruiting engine"

Font Weight 700
"Transform your career site into a recruiting engine"

Font Weight Bold 700 Italic
"Transform your career site into a recruiting engine"

Font Weight Ultra-Bold 800
"Transform your career site into a recruiting engine"

Font Weight Bold Ultra-Bold 800 Italic
"Transform your career site into a recruiting engine"

Headings

H1

{% highlight html %} font-size: 3.2em; font-weight: 700; {% endhighlight %}

H2

{% highlight html %} font-size: 2em; font-weight: 700; {% endhighlight %}

H3

{% highlight html %} font-size: 1.5em; font-weight: 700; {% endhighlight %}

H4

{% highlight html %} font-size: 1.125em; font-weight: 500; {% endhighlight %}

H5

{% highlight html %} font-size: 1.714em; font-weight: 700; {% endhighlight %}

H6

{% highlight html %} font-size: .75em; font-weight: 500; {% endhighlight %}

Body Text

Paragraphs

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

{% highlight html %} font-size: 16px; font-weight: 300; line-height: normal; {% endhighlight %}

Links

Links lead users to a different page or further information.

Navigation Links

{% highlight html %} font-size: 1.14285714em; text-decoration: none;

:hover { text-decoration: underline; }

:active { outline: 0; } {% endhighlight %}

List Items

Lists organize written information for users.

• List Item
• List Item
• List Item
• List Item

List Item class of "horiz-list__item"

{% highlight html %}

List Item>

List Item>

List Item>

List Item>

{% endhighlight %}