Sezione 12 Tipografia

La tipografia del tema è basata su scala 1.5 che da il valore alla variabile $baselineheight dalla quale sono calcolate tutte le spaziature, margini e diminsioni, oltre che a grandezze nel carattere e interlinea.

Ogni tema dispone di differenti stack in base all'utilizzo:

Font base

  • $basefontsize 100% = 16px
  • $basefontweight 400
  • $basefontfamily "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font delle intestazioni

  • $baseheadingfont 400
  • $baseheadingfont "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font base alternativo

  • $altlineheight 1.35em
  • $altfontfamily "Jost", Monaco, Courier New, monospace;

Font delle intestazioni alternativo

  • $altheadingfontweight 700
  • $altheadingfont 'OpenSansBold700', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

Font per carattere "&"

  • $ampfontfamily local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua')

Font per blocchi di codice/tabulare

  • $codefont "Jost", Monaco, Courier New, monospace;

Sezione 12 Tipografia

La tipografia del tema è basata su scala 1.5 che da il valore alla variabile $baselineheight dalla quale sono calcolate tutte le spaziature, margini e diminsioni, oltre che a grandezze nel carattere e interlinea.

Ogni tema dispone di differenti stack in base all'utilizzo:

Font base

  • $basefontsize 100% = 16px
  • $basefontweight 400
  • $basefontfamily "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font delle intestazioni

  • $baseheadingfont 400
  • $baseheadingfont "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font base alternativo

  • $altlineheight 1.35em
  • $altfontfamily "Jost", Monaco, Courier New, monospace;

Font delle intestazioni alternativo

  • $altheadingfontweight 700
  • $altheadingfont 'OpenSansBold700', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

Font per carattere "&"

  • $ampfontfamily local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua')

Font per blocchi di codice/tabulare

  • $codefont "Jost", Monaco, Courier New, monospace;

Sezione 12 Tipografia

La tipografia del tema è basata su scala 1.5 che da il valore alla variabile $baselineheight dalla quale sono calcolate tutte le spaziature, margini e diminsioni, oltre che a grandezze nel carattere e interlinea.

Ogni tema dispone di differenti stack in base all'utilizzo:

Font base

  • $basefontsize 100% = 16px
  • $basefontweight 400
  • $basefontfamily "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font delle intestazioni

  • $baseheadingfont 400
  • $baseheadingfont "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Font base alternativo

  • $altlineheight 1.35em
  • $altfontfamily "Jost", Monaco, Courier New, monospace;

Font delle intestazioni alternativo

  • $altheadingfontweight 700
  • $altheadingfont 'OpenSansBold700', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

Font per carattere "&"

  • $ampfontfamily local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua')

Font per blocchi di codice/tabulare

  • $codefont "Jost", Monaco, Courier New, monospace;

Scala tipografica ed elementi tipografici di base.

H1 Intestazione livello 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H2 Intestazione livello 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H3 Intestazione livello 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H4 Intestazione livello 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H5 Intestazione livello 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H6 Intestazione livello 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

La classe .lead è utilizzata per le intestazioni dei singoli blocchi nelle funzioni dispositive. È possibile utilizzare la classe .sub-lead per creare un'ulteriore gerarchia fra le intestazioni.

Stili default

Intestazione con classe lead

Intestazione con classe sub-lead

Markup
<h3 class="lead">Intestazione con classe lead</h3>
<h3 class="sub-lead">Intestazione con classe sub-lead</h3>