Typography

Learn how to use headings, paragraphs and other kinds of texts in Luda.

Introduction

Luda uses native font stacks by default, type sizes are calculated in a modular scale way through $typography-main-size-px and $typography-size-scale-ratio. There’re 8 level type sizes, size level from 1 to 6 are available for heading texts and size level from 5 to 8 are available for body texts. <body> font size is set at level 6 which is the calculated rem value of $typography-main-size-px.

Headings

Heading Global Styles

Global styles are added to heading elements from <h1> to <h6>, extra paddings are added in the top and bottom of these elements to ensure baseline alignment.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

Heading Classes

The classes from .h1 to .h6 can be used to create texts looks like headings.

Heading class .h1 Heading class .h2 Heading class .h3 Heading class .h4 Heading class .h5 Heading class .h6

<span class="h1">Heading class .h1</span>
<span class="h2">Heading class .h2</span>
<span class="h3">Heading class .h3</span>
<span class="h4">Heading class .h4</span>
<span class="h5">Heading class .h5</span>
<span class="h6">Heading class .h6</span>

Paragraphs

Paragraph Global styles

Global styles are added to the p element, like headings, extra paddings in the top and bottom are also added.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  Lorem ipsum dolor sit amet.
</p>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  Lorem ipsum dolor sit amet.
</p>

Paragraph Classes

You can use the classes from .p5 to .p8 to create texts looks like paragraphs.

Paragraph class .p5 Paragraph class .p6 Paragraph class .p7 Paragraph class .p8

<span class="p5">Paragraph class .p5</span>
<span class="p6">Paragraph class .p6</span>
<span class="p7">Paragraph class .p7</span>
<span class="p8">Paragraph class .p8</span>

.typo-inlineModifier

Sometimes, texts have different font sizes need be nested together, remember to use the .typo-inline modifier class to ensure baseline alignment. Let’s see the below example.

Here are some nested inline texts.

<p>
  Here are
  <span class="h1 typo-inline">some nested inline texts</span>.
</p>

Codes

If you need show large amount of codes in your applications, you’d better use code highlighters like rouge, they support many languages and features. But if you just want to show small pieces of codes, you can use the code styles in Luda directly.

Inline Codes

Global styles are added to the code, samp and kbd elements, to use inline codes, just wrap you code snippets in these elements as below.

const DOMAIN = 'luda.com'
Disk fault
CTRL + ALT + M

<p>
  <code>const DOMAIN = 'luda.com'</code><br>
  <samp>Disk fault</samp><br>
  <kbd>CTRL + ALT + M</kbd>
</p>

Code Block

To create a code block, add the .code class to a pre element, then wrap a code element inside.


  class DocumentationController
    private
    def _set_items
      @generals = @@generals
      @behaviours = @@behaviours
      @elements = @@elements
      @collections = @@collections
      @utilities = @@utilities
    end
  end

<pre class="code">
<code>
  class DocumentationController
    private
    def _set_items
      @generals = @@generals
      @behaviours = @@behaviours
      @elements = @@elements
      @collections = @@collections
      @utilities = @@utilities
    end
  end
</code>
</pre>

Quotes

Quotes should be included with the the <q> tag or the <blockquote> tag.

Inline Quote

Global styles are added to the <q> tag and the <cite> tag, for short quotes, we should use the <q> tag.

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced. – Brave New World

<p>
  <q>
    Words can be like X-rays, if you use them properly – they'll go through anything.
    You read and you're pierced.
  </q>
  <cite>– Brave New World</cite>
</p>

Blockquote

To include long quotes, we should use the <blockquote> tag. Add the .quote class to the <blockquote> tag, then wrap <p> tags inside. If a footnote is necessary, include a <footer> tag.

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

Brave New World

<blockquote class="quote" cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Words can be like X-rays, if you use them properly – they'll go through anything.
    You read and you're pierced.
  </p>
  <footer class="p6">
    <cite>Brave New World</cite>
  </footer>
</blockquote>

Links

Link Global Styles

Global styles are added to the <a> tag.

This is a link.

<a href="#">This is a link.</a>

Light Link

For using links in dark backgrounds, add the .link-light calss to the <a> tag.

This is a light link.

<a class="link-light" href="#">This is a light link.</a>

Lists

For different purpose, you should use different type lists.

Unordered List

The <ul> element represents an unordered list of items.

Unordered list item one
Unordered list item two
Unordered list item three

<ul class="p6">
  <li>Unordered list item one</li>
  <li>Unordered list item two</li>
  <li>Unordered list item three</li>
</ul>

Ordered List

The <ol> element represents an ordered list of items.

Ordered list item one
Ordered list item two
Ordered list item three

<ol class="p6">
  <li>Ordered list item one</li>
  <li>Ordered list item two</li>
  <li>Ordered list item three</li>
</ol>

Definition List

The <dl> element represents a description list.

Title One: Definition list item one
Title Two: Definition list item two
Title Three: Definition list item three

<dl class="p6">
  <dt>Title One</dt>
  <dd>Definition list item one</dd>
  <dt>Title Two</dt>
  <dd>Definition list item two</dd>
  <dt>Title Three</dt>
  <dd>Definition list item three</dd>
</dl>

Other Inline Texts

You can preview the appearances of other inline texts in the below examples.

Bold Strong Inserted Underline Emphasis Italic ~~Delete~~ ~~Stroke~~ Text _Sub Text ^Sup abbr Mark

<p>
  <b>Bold</b>
  <strong>Strong</strong>
  <ins>Inserted</ins>
  <u>Underline</u>
  <em>Emphasis</em>
  <i>Italic</i>
  <del>Delete</del>
  <s>Stroke</s>  
  <span>Text <sub>Sub</sub></span>
  <span>Text <sup>Sup</sup></span>
  <abbr title="abbr">abbr</abbr>
  <mark>Mark</mark>
</p>

Sass Mixins

+font-face($family: null, $style: normal, $weight: 400, $locals: null, $urls: null, $unicodes: null)

This mixin is used to import web fonts. $locals, $urls and $unicodes should be lists.

+typo-link($class: null, $color: null, $hover-color: null, $active-color: null)

This mixin is used to create more link color classes.

Sass Variables

Body Texts

$typography-main: constant-get(typography-stacks, sans-serif) !default

Default font family of body texts.

$typography-main-size-px: 16px !default

This variable is used for type scale calculation from size level 1 to 8. The value of this variable is treated as level 6 and a calculated rem value is used to set the font-size property of body.

$typography-size-scale-ratio: constant-get(scale-ratios, minor-second) !default

Default type scale ratio of texts. Different level font sizes are calculated based on this variable and $typography-main-size-px.

$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default

Default baseline offset ratio of body texts font family, it’s used to calculate text paddings for better baseline alignment.

$typography-baseline-divided: false !default

By default $baseline-height-px is used as the basic unit for calculating typography line heights. If the value of this variable is true, $baseline-height-px / 2 will be used for calculation.

$typography-main-expected-line-height-ratios: (1.3, 1.5, 1.5, 1.5) !default

Default expected line height ratios of body texts at level 5, 6, 7 and 8. The values are used for calculating body texts line heights and might not match the calcualted values exactly.

$typography-main-color: $color-main !default

Default color of body texts.

Heading

$typography-heading: null !default

Default font family of headings.

$typography-heading-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default

Default baseline offset ratio of headings, for better baseline alignment.

$typography-heading-expected-line-height-ratios: (1.2, 1.2, 1.2, 1, 1, 1) !default

Default expected line height ratios of heading texts from level 1 to 6. The values are used for calculating heading texts line heights and might not match the calcualted values exactly.

$typography-heading-color: null !default

$typography-heading-font-weight: 500 !default

Code

$typography-code: constant-get(typography-stacks, code) !default

Default font family of codes.

$typography-code-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Courier New") !default

Default baseline offset ratio of codes, for better baseline alignment.

$typography-code-expected-line-height-ratio: nth($typography-main-expected-line-height-ratios, 2) !default

Default expected line height ratios of code block. The value is used for calculating code block line height and might not match the calcualted value exactly.

$typography-block-code-size-level: 7 !default

The value must be an integer between 5 and 8.

$typography-code-padding-em: 0 0.2em !default

Default paddings of inline codes.

$typography-code-background: $background-color-muted !default

$typography-code-color: $color-main !default

$typography-code-border-radius: $border-radius-main !default

$typography-block-code-padding-rem: 0 $spacing-medium-rem !default

Quote

$typography-quote: null !default

Default font family of quotes.

$typography-quote-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default

Default baseline offset ratio of quotes, for better baseline alignment.

$typography-quote-expected-line-height-ratio: nth($typography-main-expected-line-height-ratios, 1) !default

Default expected line height ratios of blockquote. The value is used for calculating blockquote line height and might not match the calcualted value exactly.

$typography-block-quote-size-level: 5 !default

The value must be an integer between 5 and 8.

$typography-cite-color: $color-muted !default

$typography-block-quote-padding-rem: $spacing-medium-rem !default

$typography-block-quote-p-margin-rem: 0 auto $spacing-small-rem !default

$typography-block-quote-cite-line-height: $line-width-main !default

Link

$typography-link-text-decoration: underline !default

$typography-link-hover-text-decoration: null !default

$typography-link-active-text-decoration: null !default

$typography-link-color: $color-main !default

$typography-link-hover-color: $color-emphasis !default

$typography-link-active-color: null !default

$typography-link-light-color: $color-inverse-main !default

$typography-link-light-hover-color: $color-inverse-emphasis !default

$typography-link-light-active-color: null !default

List

$typography-list-nested-padding-em: 0 0 0 2em !default

Default paddings of nested lists.

Mark

$typography-mark-padding-em: 0 0.2em !default

$typography-mark-background: $background-color-emphasis !default

$typography-mark-color: $color-primary !default

$typography-mark-border-radius: $border-radius-main !default

Others

$typography-sub-sup-size: 100% / $typography-size-scale-ratio !default

$typography-sub-bottom-offset-em: -0.25em !default

$typography-sup-top-offset-em: -0.5em !default