Typography

Headlines (h1, h2, h3, ...)

Headlines (h1, h2, ...) are not styled by default, this is because it would limit how headlines could be used. Instead Escala provides 3 main headline classes which can be used with any of h elements.

Why only 3, not 6? For simplicity. Applications rarely need more and if your does, you should think about why is that in the first place. And of course, you could just extend Escala by another set.

Syntax

<h1 class="title">...</h1>
<h2 class="headline">...</h2>
<h3 class="subHeadline">...</h3>

Overview

Configuration

$fontFamily-sansSerif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$fontFamily: "Open Sans", $fontFamily-sansSerif !default;

$fontSize-title: rem(22px) !default;
$fontSize-headline: rem(18px) !default;
$fontSize-subHeadline: rem(16px) !default;
$fontSize-default: rem(13px) !default;
$fontSize-small: rem(12px) !default;
$fontSize-smaller: rem(10px) !default;