Typography
This is a breakdown of Fonts and typographic elements used.
KWALL uses rem units for all typographic elements. For ease of conversion from pixels the root element scss is set: html {font-size: 62.5%;}. This means 10px = 1rem.
Odile Book
Aa
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
$font-serif: 'odile-book', Georgia, Times, 'Times New Roman', serif;Odile Upright Italic
Aa
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
$font-serif-upright: 'odile-upright-italic', Georgia, Times, 'Times New Roman', serif;Neutraface Book
Aa
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
$font-sans: 'NeutrafaceText-Book', 'Futura', 'Trebuchet MS', Arial, sans-serif;Neutraface Bold
Aa
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
$font-sans-book: 'NeutrafaceText-Book', 'Futura', 'Trebuchet MS', Arial, sans-serif;
font-weight: bold;
Text Styles
h1
The five boxing wizards jump quickly
<h1>...</h1>color: $color-green-dark;
font-family: $font-sans;
font-size: 7.5rem;
font-weight: bold;
line-height: 1.1428;
@media (max-width: 767px) {font-size: 4.5rem;}
h2
The five boxing wizards jump quickly
<h2>...</h2>color: $color-black;
font-family: $font-serif-upright;
font-size: 4.6rem;
font-style: italic;
font-weight: normal;
line-height: 1.111;
@media (max-width: 767px) {font-size: 4.2rem;}h3
The five boxing wizards jump quickly
<h3>...</h3>color: $color-black;
font-family: $font-sans;
font-size: 3.6rem;
font-weight: bold;
line-height: 1.0555;
@media (max-width: 767px) {font-size: 3.4rem;}h4
The five boxing wizards jump quickly
<h4>...</h4>color: $color-black;
font-family: $font-sans;
font-size: 2.3rem;
font-weight: bold;
line-height: 1.0869;h5
The five boxing wizards jump quickly
<h5>...</h5>color: $color-black;
font-family: $font-sans;
font-size: 2rem;
font-weight: bold;
line-height: 1.1;h6
The five boxing wizards jump quickly
<h6>...</h6>color: $color-black;
font-family: $font-sans;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.1;.lead
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis bibendum posuere. Maecenas luctus purus nisi, at accumsan ipsum elementum non. Integer a vestibulum lorem, bibendum congue velit. Integer nec tortor ut justo ultricies vestibulum ut non erat. Donec libero feli.
<p class="lead">...</p>color: $color-grey-dark;
font-family: $font-family-serif;
font-size: 2.2rem;
line-height: 1.2727;p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis bibendum posuere. Maecenas luctus purus nisi, at accumsan ipsum elementum non. Integer a vestibulum lorem, bibendum congue velit. Integer nec tortor ut justo ultricies vestibulum ut non erat. Donec libero feli.
<p>...</p>color: $color-grey-dark;
font-family: $font-family-serif;
font-size: 1.8rem;
line-height: 1.333;
Text Sample
Heading Two
Lead Text ipsum dolor sit amet, consectetur adipiscing elit.
Sed molestie eget mauris at finibus. Praesent quis Inline link text pretium massa, bibendum consectetur mi. Vivamus a turpis at mauris auctor rutrum sed nec turpis. Nulla facilisi. Praesent commodo ex tortor, et fermentum urna congue ac. Proin vitae lobortis nibh. Curabitur pretium dolor eget placerat blandit. Maecenas et velit in ex laoreet tincidunt.
Heading Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie eget mauris at finibus. Praesent quis pretium massa, bibendum consectetur mi. Maecenas et velit in ex laoreet tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis bibendum posuere. Maecenas luctus purus nisi, at accumsan ipsum elementum non. Integer a vestibulum lorem, bibendum congue velit. Integer nec tortor ut justo ultricies vestibulum ut non erat. Donec libero feli.
Heading Four
Sed molestie eget mauris at finibus. Praesent quis pretium massa, bibendum consectetur mi. Maecenas et velit in ex laoreet tincidunt.
Blockquote
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie eget mauris at finibus. Praesent quis pretium massa, bibendum consectetur mi. Vivamus a turpis at mauris auctor rutrum sed nec turpis. Nulla facilisi.”
<blockquote>...</blockquote>border-left: 4px solid $color-red;
font-family: $font-sans-book;
font-size: 3.2rem;
font-style: italic;
font-weight: normal;
line-height: 1.15625;
@media (max-width: 767px) {font-size: 2rem; line-height: 1;}
Unordered Lists
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
<ul>
<li>...</li>
<li>...</li>
<li>...
<ul>
<li>...
<ul>
<li>...
<ul>
<li>...
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Ordered Lists
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>