Typography

Headings

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Paragraphs

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

This is another paragraph with emphasized text, strong text, and marked text.

This is small text, often used for fine print.

<p>This is a standard paragraph. Lorem ipsum dolor sit amet...</p>

<p>This is another paragraph with <em>emphasized</em> text, 
<strong>strong</strong> text, and <mark>marked</mark> text.</p>

<p><small>This is small text, often used for fine print.</small></p>

Blockquotes

This is a blockquote. Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs

<blockquote>
  <p>This is a blockquote. Design is not just what it looks like
  and feels like. Design is how it works.</p>
  <cite>— Steve Jobs</cite>
</blockquote>

Text Formatting

Superscript: x² | Subscript: H₂O

<abbr title="HyperText Markup Language">HTML</abbr>
<code>code element</code>
<kbd>kbd element</kbd>
<samp>samp element</samp>
<var>var element</var>
<time datetime="2023-01-01">January 1, 2023</time>

Superscript: x<sup>2</sup>
Subscript: H<sub>2</sub>O

Address

Written by Example Author.
123 Example Street
Example City

<address>
  Written by <a href="mailto:[email protected]">Example Author</a>.<br>
  123 Example Street<br>
  Example City
</address>

Typography Variables

lotte css uses CSS variables to define typography properties like font families, sizes, and weights.

:root {
  /* Font families */
  --font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
    'Helvetica Neue', sans-serif;
  --font-family-mono: 'IBM Plex Mono', Menlo, Monaco, Consolas, 
    'Liberation Mono', 'Courier New', monospace;
  
  /* Font sizes */
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  /* Line heights */
  --line-height-base: 1.5;
  --line-height-heading: 1.2;
}

Font Classes

This text uses IBM Plex Sans (default)

This text uses IBM Plex Mono

<p class="font-sans">This text uses IBM Plex Sans (default)</p>
<p class="font-mono">This text uses IBM Plex Mono</p>