Typographie

Vue d'ensemble

Afin d'optimiser la lisibilité pour l'utilisateur. La longueur de ligne des paragraphes <p> est fixée à 85 caractères maximum (la longueur est calculée par le navigateur en fonction de la largeur du caractère "0"). Les lignes sont automatiquement tronquées sur les mots.

Les titres

Les titres MDN Référence, leur taille varie légèrement en fonction de la largeur de l'écran et le rythme vertical est assuré automatiquement en fonction de celle-ci.

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Les titres qui sont le premier enfant d'un bloc, n'ont pas de marge supérieure.

La couleur des titres est personnalisable via les variables CSS --color-hX avec X variant de 1 à 6.

Des classes utilitaires, pour imiter le style des titres de .like-h1 à .like-h6 sans la gestion du rythme verticale, à utiliser principalement sur des éléments <span> ou <a> sont disponibles.

A l'intérieur d'un <header> ou d'une <div> avec class="heading" le rythme vertical est réduit et les derniers éléments sont grisés.

Titre 2

Sous-titre 3

<div class="heading">
	<h2>Titre 2</h2>
	<h3>Sous-titre 3</h3>
	<span class="like-h4">Sous-titre "like-h4"</span>
</div>

Les éléments texte "inline"

Les éléments texte, sont préformatés et stylisés

Abbr abbr MDN Référence
<abbr title="abbreviation">Abbr</abbr>

time MDN Référence
<time datetime="2022-07-07">7 Juillet</time>

Bold strong b MDN Référence
<strong>Bold</strong>

italic em i MDN Référence
<em>italic</em>

souligné u MDN Référence
<u>souligné</u>

barré s MDN Référence
<s>barré</s>

surligné mark MDN Référence
<mark>surligné</mark>

Petit small MDN Référence
<small>Petit</small>

Indicesub sub MDN Référence
Indice<sub>sub</sub>

Exposantsup sup MDN Référence
Exposant<sup>sup</sup>

Supprimé del MDN Référence
<del>Supprimé</del>

Inséré ins MDN Référence
<ins>Inséré</ins>

variable var MDN Référence
<var>variable</var>

60 output MDN Référence
<output name="result" value="60">60</output>

Clavier non trouvé samp MDN Référence
<samp>Clavier non trouvé</samp>

Clavier kbd MDN Référence
<kbd>Inséré</kbd>

Vous avez également accès à la balise <code>Code</code>

A l'intérieur de celle-ci vous avez accès à une colorisation syntaxique basique grâce aux balises <b>tag</b> <i>propriété</i> <u>valeur</u> <var>valeur</var> et <em>Commentaire</em>

NB : n'oubliez pas d'échapper les caractères spéciaux !

Les paragraphes

Les paragraphes MDN Référence indispensables, pour vos textes. Les marges supérieures s'adaptent automatiquement en fonction du contexte. Ils adaptent également la marge supérieure des éléments qui les suivent directement en fonction de ceux-ci. Tout cela afin de conserver un rythme vertical fluide.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, architecto asperiores culpa, dignissimos doloremque dolores expedita hic iusto magnam molestiae, neque odio provident reiciendis repellat vitae! Accusantium autem consequuntur delectus dolor eos exercitationem, facilis magni nesciunt placeat possimus recusandae saepe sapiente, voluptatibus? Aliquam aut culpa cumque iste perspiciatis quod velit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet aperiam atque blanditiis consectetur, cupiditate expedita iste labore laboriosam maxime molestiae non optio quaerat tenetur? At delectus exercitationem harum ipsam molestias pariatur quas quasi ratione recusandae similique? A culpa ducimus harum libero magnam nam placeat, repellendus suscipit. Ea maxime molestias mollitia nostrum sed. Atque debitis dolorem earum, inventore ipsum maxime nihil saepe. Ab ad, consequatur eaque incidunt ipsum laudantium quas qui reprehenderit sequi voluptate. 

<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, architecto asperiores culpa, dignissimos doloremque dolores expedita hic iusto magnam molestiae, neque odio provident reiciendis repellat vitae! Accusantium autem consequuntur delectus dolor eos exercitationem, facilis magni nesciunt placeat possimus recusandae saepe sapiente, voluptatibus? Aliquam aut culpa cumque iste perspiciatis quod velit!
</p>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet aperiam atque blanditiis consectetur, cupiditate expedita iste labore laboriosam maxime molestiae non optio quaerat tenetur? At delectus exercitationem harum ipsam molestias pariatur quas quasi ratione recusandae similique? A culpa ducimus harum libero magnam nam placeat, repellendus suscipit. Ea maxime molestias mollitia nostrum sed. Atque debitis dolorem earum, inventore ipsum maxime nihil saepe. Ab ad, consequatur eaque incidunt ipsum laudantium quas qui reprehenderit sequi voluptate.
</p>
<button>Un bouton</button>

Les liens

Les liens MDN Référence sont disponibles en plusieurs variations. Les couleurs de base sont de type Primary.

Les liens peuvent également prendre l'apparence de boutons.

Primary Secondary 
<a href="#">Primary</a>
<a href="#" class="link-underline">Underline</a>
<a href="#" class="link-underline link-underline--dashed">Dashed</a>
<a href="#" class="link-underline link-underline--dotted">Dotted</a>
<a href="#" class="link-underline link-underline--overline">Overline</a>
<a href="#" class="link-underline link-underline--around">Around</a>
<a href="#" class="link-underline link-underline--lineThrough">LineThrough</a>
<a href="#" class="link-underline link-underline--wavy">Wavy</a>
<a href="#" class="link--mark">Mark</a>

<a href="#" class="link--secondary">Secondary</a>
<a href="#" class="link--secondary link-underline">Underline</a>
<a href="#" class="link--secondary link-underline link-underline--dashed">Dashed</a>
<a href="#" class="link--secondary link-underline link-underline--dotted">Dotted</a>
<a href="#" class="link--secondary link-underline link-underline--overline">Overline</a>
<a href="#" class="link--secondary link-underline link-underline--around">Around</a>
<a href="#" class="link--secondary link-underline link-underline--lineThrough">LineThrough</a>
<a href="#" class="link--secondary link-underline link-underline--wavy">Wavy</a>
<a href="#" class="link--secondary link--mark">Mark</a>

<a role="button" href="#">Primary</a>
<a role="button" href="#" class="btn--secondary">Secondary</a>

Les citations

Les citationsMDN Référence, un classique. Le tag <cite> est stylisé et s'il est dans un <footer>, il est placé automatiquement sur la droite. Les paragraphes <p> sont mis en inline.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem Ipsum 
<blockquote>
	<p>
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<footer>
		<cite>Lorem Ipsum</cite>
	</footer>
</blockquote>

<blockquote>
	<p>
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<cite>Lorem Ipsum</cite>
</blockquote>

Texte préformaté

S'adaptera automatiquement en fonction de la taille d'affichage. Si le texte préformaté MDN Référence est trop grand, une barre de scroll apparaitra automatiquement. 

		_____________
		< Sass Swing !>
		-------------
		       \   ^__^
		        \  (oo)\_______
		           (__)\       )\/\
		               ||----w |
		               ||     ||

Vous pouvez utiliser la balise <code> pour obtenir une coloration syntaxique. Vous pouvez également ajouter l'attribut data-lang="mon langage" pour afficher le type de code

body {
  background-color : red;
}
<pre>
		_____________
		< Sass Swing !>
		-------------
		       \   ^__^
		        \  (oo)\_______
		           (__)\       )\/\
		               ||----w |
		               ||     ||
	</pre>
<pre data-lang="css"><code><b>body</b> {
  <i>background-color</i> : <u>red</u>;
}</code></pre>

Personnalisation

Le styles des éléments <mark>, <ins>, <del>, <kbd>, <code> et autres sont personnalisables via les variables CSS ou SCSS.
Pour plus d'informations reportez-vous à la section Personnalisation

Grâce aux variables CSS, vous pouvez également customiser facilement vos propres liens

Custom 
.link--custom {
  --color: #4E342E;
  --decoration-color: #4E342E;
  --hover-color: #795548;
  --hover-decoration-color: #795548;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    .link--custom {
      --color: #e78872;
      --decoration-color: #4E342E;
      --hover-color: #e1b6a7;
      --hover-decoration-color: #795548;
    }
  }
}

[data-theme='dark'] {
  .link--custom {
    --color: #e78872;
    --decoration-color: #4E342E;
    --hover-color: #e1b6a7;
    --hover-decoration-color: #795548;
  }
}