Primary

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Header div
Header span

Header p

This is the heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Secondary

  • List Item #1
  • List Item #2
  • List Item #3
Cool Number
0
Days
Hours
Minutes
Progress Bar
Web Designer 50%

Accent

Button

Text

Text Editor H1

Text Editor H2

Text Editor H3

Text Editor H4

Text Editor H5
Text Editor H6
Text Preformatted

Text Editor Paragraph

Text Editor Link

Custom Fonts

Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Claim
Body
Body Big
Body Small
Button
Menu

Define Root Font for REM (Custom CSS)

html { font-size: 16px; } @media only screen and (max-width: 600px) { html { font-size: 16px; } }

Font Sizes System

Living with Pixels: https://livingwithpixels.com/resources/font-sizes/

Root Font / Custom Fonts / Typography

Oberste Definition

  • Custom CSS mit Root Font (HTML-CSS)
  • Normal 1REM = 16px
  • Kann auf Desktop variiert werden
  • Auf Mobile würde ich es belassen

Nächste Stufe: 4 Elementor Fonts:

  • Primary, Secondary, Text, Accent
  • Definiert Elementor-Elemente, wenn gar nichts definiert wird
  • Nichts definieren!
    • Allenfalls Schriftfamilien
    • Allenfalls gewollt eine schräge Familie verwenden

Wichtigste Stufe: Custom Fonts

  • Alle wichtigen Fonts definieren
    • Familie
    • Weight
    • Grösse (Clamp)
  • Das ist die eigentliche Referenz

Typography: Custom Fonts referenzieren

  • Standard-Definitionen für wichtigste HTML-Elemente
    • Custom Fonts
    • Custom Colors
  • H nicht definieren, wenn SEO-Ranking getrennt von Aussehen genutzt wird
  • Keine eigenen Definitionen machen!
  • Wichtig: Link-Farbe