Standard texts (Textes standards)

Les textes standards sont le principal moyen utilisé pour visualiser le contenu. Ils garantissent que celui-ci soit optimisé pour être lisible et performant.

Usage

Le texte standard est généralement utilisé pour du long texte, pour tout type de contenu informationnel de base.

Cas spécifiques

Le composant texte satndard inclut en fait plusieurs cas spécifiques permettant des variations d’affichage :

  • sur la taille du texte
  • sur son poids, via la graisse ou via la couleur du texte
  • sur la couleur en fonction de l’arrière-plan.

Bonnes pratiques

  • Privilégier un ferrage à gauche permet à l’œil d’avoir un point de départ constant pour chaque ligne et facilite la lecture du texte.
  • La justification du texte peut impliquer des intervalles non harmonieux entre les mots et des césures, surtout sur mobile où la largeur de l’écran est réduite, elle est donc à éviter.
  • Sur écrans larges, le colonage contribue à la lisibilité et au confort de lecture.
    • La longueur optimale d’une ligne est comprise entre 50 et 90 caractères.
    • Les retours à la ligne rythment la lecture.
    • Un pavé de texte composé en justification courte semble plus « digeste » que le même texte composé en justification longue.

Accessibilité

  • Les petites tailles de police sont moins accessibles et fatiguent les yeux.
  • Les interlignes assez grandes facilitent la lecture.
  • Le contraste est un facteur essentiel pour un texte facile à lire. Le noir sur blanc est évidemment le contraste standard.
exemple
La couleur du texte doit être compatible avec l’arrière plan.

KO

Style & code

Dépendances :

Le texte standard est lié au contenu éditorial. Il est donc lié aux classes su-article et su-articles-list qui englobent ces zones. Son utilisation peut être forcée en-dehors de ces zones éditoriales avec la classe su-text-standard.

Le texte standard n’est pas un composant en tant que tel, il fait partie du core, c’est à dire des éléments obligatoires. Il n’y a donc pas de d’import CSS de ce composant si vous utilisez SipaUI avec la méthode NPM…

Texte standard

Il existe 2 types de texte standard : le texte standard générique et le texte standard éditorial devant offrir un confort de lecture adapté aux longs textes. Ce dernier peut donc être légèrement plus grand et avec une hauteur de ligne légèrement plus haute (cela peut varier en fonction des thèmes).

Texte standard générique

Il s’agit du texte par défaut de SipaUI. Il peut être ajouté si nécessaire avec la classe su-text-standard. Attention, cette classe est puissante parce qu’elle utilise !important.

Dans l’exemple ci-dessous, les 2 paragraphes sont stylés par des CSS de la page. La classe su-text-standard permet de forcer l’apparence standard sur le second paragraphe.

<style>
    .surcharge-paragraphe {
        font-size: 1.2rem;
        line-height: 1;
        color: darkblue;
    }
</style>
<article class="surcharge-paragraphe">
    <p>Texte avec son propre style. 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.</p>
    <p class="su-text-standard">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.</p>
</article>

Texte standard éditorial

Le texte standard éditorial (dans un article) est étudié pour offrir un plus grand confort de lecture, notamment en mobile (corps potentiellement plus grand et hauteur de ligne plus importante). Il est soit lié à la classe su-article (qui va imposer toutes les règles des textes éditoriaux, comme les titres, les listes…), soit à la classe su-text-standard-editorial qui n’impacte que le texte lui-même.

<article class="su-article">
    <p>Texte d’article influencé par le su-article. 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.</p>
    <p>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.</p>
</article>
<hr />
<article>
    <p>Texte standard. 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.</p>
    <p class="su-text-standard-editorial">Texte standard surchargé par su-text-standard-editorial. 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.</p>
</article>

Sur fond sombre

Il est possible de passer le texte en couleur claire quand un fond sombre l’impose. Utilisez pour ça la classe su-negative.

<article class="su-article su-negative" style="background: DimGray; padding: 10px">
    <p>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.</p>
    <p>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.</p>
</article>

Variation d’importance

Importance forte

Utilisation de la balise <strong>.

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Importance moyenne

Utilisation de la balise <em>.

<p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</em>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Importance faible

Utilisation de la classe su-text-light.

<p>Lorem ipsum dolor sit amet, <span class="su-text-light">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Importance très faible

Utilisation de la classe su-text-xlight.

<p>Lorem ipsum dolor sit amet, <span class="su-text-xlight">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Variation de taille

Tout petit texte

Pour afficher un texte tout petit comme des conditions légales (…), vous pouvez utilisez la classe su-text-xsmall. Cette classe n’est pas liée aux zones éditoriales (su-article).

<p class="su-text-xsmall">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.</p>

Petit texte

Pour afficher un texte légèrement plus petit que le texte standard, vous pouvez utilisez la classe su-text-small. Cette classe n’est pas liée aux zones éditoriales (su-article).

<p class="su-text-small">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.</p>

Texte médium

Pour afficher un texte de la taille du texte standard (pour surcharger p. ex. un texte qui a une autre taille définie par son composant), vous pouvez utilisez la classe su-text-medium. Cette classe n’est pas liée aux zones éditoriales (su-article).

<p class="su-text-medium">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.</p>

Grand texte

Pour afficher un texte un peu plus grand qu’un texte standard (mais de la taille d’un texte standard éditorial) vous pouvez utilisez la classe su-text-big. Cette classe n’est pas liée aux contenus éditoriaux (su-article, su-text-standard-editorial) et se contente uniquement d’agrandir le corps du texte.

<p class="su-text-big">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.</p>

Variation d’interlignage

Grâce aux Helpers (classes d’aide), il est possible de modifier l’interlignage avec les classes : su-line-height-xs (1), su-line-height-s (1.2), su-line-height-m (1.35), su-line-height-l (1.5) et su-line-height-xl (2).

<p class="su-line-height-xs">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.</p>
<p class="su-line-height-s su-margin-top-m">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.</p>
<p class="su-line-height-m su-margin-top-m">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.</p>
<p class="su-line-height-l su-margin-top-m">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.</p>
<p class="su-line-height-xl su-margin-top-m">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.</p>

Variation de justification

Par défaut, le texte standard est ferré (aligné) à gauche.

D’autres justifications sont possibles. SipaUI intègre les classes nécessaires, via les Helpers (classes d’aide).

Ferrage à gauche forcé

Utilisation de la classe su-text-left.

<article class="su-article">
    <p class="su-text-left">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.</p>
</article>

Ferrage à droite

Utilisation de la classe su-text-right.

<article class="su-article">
    <p class="su-text-right">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.</p>
</article>

Justification

Utilisation de la classe su-text-justify.

<article class="su-article">
    <p class="su-text-justify">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.</p>
</article>

Centrage

Utilisation de la classe su-text-center.

<article class="su-article">
    <p class="su-text-center">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.</p>
</article>

Liste des classes disponibles

  • su-article (zone éditoriale d’un détail article)
  • su-articles-list (zone éditoriale d’une liste d’article)
  • su-text-standard (si besoin de surcharge)
  • su-text-standard-editorial (si besoin de surcharge)
  • su-text-xsmall
  • su-text-small
  • su-text-medium
  • su-text-big
  • su-text-light
  • su-text-xlight
  • su-negative

Classes annexes

Le code a bien été copié !