Commentary

Typography sets default styles for all text elements such as headings, paragraphs and semantic text elements. Text sizing uses the base font size (typically 1rem). Heading sizes are controlled by a scale factor that is nominally in 0.25 steps. Alternative step sizes is 0.125 or 0.067. The step size is set in the variable --size-factor. Text content can also be controlled by setting alignment, color and size. These can be used in combination as well. See Typography Sandbox.

The font families are chosen to provide the best accessibility ratings as described in Accessible fonts and Font accessibility and readability. Note that attention also needs to be paid to sufficient font weight and color to maintain high accessibility scores.

Semantic text elements use the browser user agent only. No additional decorations provided.

Usage

Classes:
.is-family-code,
.is-family-monospace,
.is-family-primary,
.is-family-sans-serif,
.is-family-secondary		 Sets the font family to use for the target element
.is-size-x x is [1-7]; Adjusts font size for target element
.is-title-x x is [1-7]; Adjusts font size for target element as well as setting font weight to semi-bold and adjusts bottom margin. Matches h HTML tag but carries no semantic meaning.
.sub-title Matches a sub-title to a given h HTML tag.
.is-indented-1, .is-indented-2, .is-indented-3 Optional indenting options. Default indents are 3rem, 6rem or 9rem. Works for left-to-right and right-to-left text.
Positioning options: .has-text-start, .has-text-centered, .has-text-end, .has-text-justified
Font options: .is-text-light, .is-text-normal, .is-text-medium, .is-text-semibold, .is-text-bold
Colour options: .has-text-danger, .has-text-dark, .has-text-black, .has-text-light, .has-text-link, .has-text-primary, .has-text-secondary, .has-text-success, .has-text-tertiary, .has-text-warning, .has-text-white
Dependencies:
File: typography.css
Fonts: --family-monospace, --family-sans-serif, --family-serif
Main text: --text-darker, --weight-semibold
Font sizes: --scale-factor, --size-1, --size-2, --size-3, --size-4, --size-5, --size-6, --size-7
Font colors: --bg-main, --bg-main-invert, --danger, --grey, --grey-dark, --link, --primary, --secondary, --success, --tertiary, --warning, --white-ter

Examples

Classic Heading Sizes

Base Font = 1rem; Normal Scale Factor = 1.125

H1 Heading One (base * factor5 )

H1 Sub Title

H2 Heading Two (base * factor4 )

H2 Sub Title

H3 Heading Three (base * factor3 )

H3 Sub Title

H4 Heading Four (base * factor2 )

H4 Sub Title

H5 Heading Five (base)
H6 Heading Six (base / factor)

                <h1>H1 Heading One <small>(base + 5 * factor)</small></h1>
                <p class="sub-title">H1 Sub Title</p>

                <h2>H2 Heading Two <small>(base + 4 * factor)</small></h2>
                <p class="sub-title">H2 Sub Title</p>

                <h3>H3 Heading Three <small>(base + 3 * factor)</small></h3>
                <p class="sub-title">H3 Sub Title</p>

                <h4>H4 Heading Four <small>(base + 2 * factor)</small></h4>
                <p class="sub-title">H4 Sub Title</p>

                <h5>H5 Heading Five <small>(base + factor)</small></h5>
                <h6>H6 Heading Six <small>(base)</small></h6>

Text Families

is-family-primary

is-family-secondary

is-family-code


                    <p class="is-family-primary">is-family-primary</p>

                    <p class="is-family-secondary">is-family-secondary</p>

                    <p class="is-family-code">is-family-code</p>

Text Controls

text is left (default) .has-text-primary

.has-text-centered .has-text-secondary

.has-text-start .has-text-tertiary

.has-text-end .has-text-link

.has-text-justified .has-text-danger Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.has-text-start .has-text-warning

.has-text-centered .has-text-success

.has-text-black .is-size-7

.has-text-white .is-size-5

.has-text-dark .is-size-3

.has-text-light .is-size-1 


                   <p>
                       <span>text is left (default)</span>
                       <span class="has-text-primary">.has-text-primary</span>
                   </p>

                   <p class="has-text-centered">
                       <span>.has-text-centered</span>
                       <span class="has-text-secondary">.has-text-secondary</span>
                   </p>

                   <p class="has-text-start">
                       <span>.has-text-start</span>
                       <span class="has-text-tertiary">.has-text-tertiary</span>
                   </p>

                   <p class="has-text-end">
                       <span>.has-text-end</span>
                       <span class="has-text-link">.has-text-link</span>
                   </p>

                   <p class="has-text-justified">
                       <span>.has-text-justified</span>
                       <span class="has-text-danger">.has-text-danger</span>
                       <span class="has-text-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                   </p>

                   <p class="has-text-start">
                       <span>.has-text-start</span>
                       <span class="has-text-warning">.has-text-warning</span>
                   </p>

                   <p class="has-text-centered">
                       <span>.has-text-centered</span>
                       <span class="has-text-success">.has-text-success</span>
                   </p>

                   <p class="has-text-start">
                       <span class="has-text-black is-size-7">.has-text-black  .is-size-7</span>
                   </p>

                   <p class="has-text-start has-bg-dark">
                       <span class="has-text-white is-size-5">.has-text-white  .is-size-5</span>
                   </p>

                   <p class="has-text-start">
                       <span class="has-text-dark is-size-3">.has-text-dark .is-size-3</span>
                   </p>

                   <p class="has-text-start has-bg-dark">
                       <span class="has-text-light is-size-1">.has-text-light .is-size-1</span>
                   </p>

Semantic Text Elements

Example: <cite>Citation</cite>

Bold strong b
Emphasis em
Italic i
Citation cite
Underline u
Inserted ins
Strikethroughs strike
Deleted del
Samples samp
Text Subscripted sub
TextSuperscripted sub
Highlighted mark
I18N abbr
Hello World! code
Ctrl + S kbd
time
x = y + 2 var