Charte typo

 

Voici la liste des codes de microtypographie de tinytypo, qui gère la microtypographie de ce site. Les codes supplémentaires (images etc) sont définis dans le guide de styles.

Tiny Typo est une base CSS pour le contenu éditorial web. Elle fait le minimum typographique nécessaire à la rédaction de documents web. Ni perfectionniste, ni avant-gardiste, elle se veut simple et robuste. C'est pourquoi elle est en HTML et CSS, sans image, ni fonte, ni JavaScript, respectueuse des standards W3C, responsive, soucieuse d'accessibilité et facile à utiliser.

Pour faciliter la personnalisation, un minimum de couleurs et polices sont déclarées dans la base Tiny Typo. À vous de compléter dans votre propre feuille de style. Des sélecteurs CSS bien pratiques, complétant le HTML natif, décrits ci-après, sont mis à disposition pour vous faciliter la vie.

Tiny Typo devrait fonctionner sur n'importe quel site : en pur CSS ou avec LESS, avec ou sans framework, CMF ou CMS. Dans le cas contraire, merci de signaler les difficultés rencontrées, par courriel ou venez en discuter sur IRC #tinytypo.

Paragraphes

Tout paragraphe est marqué par l'élément HTML <p>. L'idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu'on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
Ici, retour à la ligne, avec l'élément <br>. Espace insécable.

Second paragraphe. Selon la norme typographique adoptée, la première ligne d'un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.


Troisième paragraphe, précédé d’une ligne horizontale de séparation <hr>. La lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il est donc recommandé d'aérer le texte : faire des paragraphes courts et sauter une ligne entre chaque.

Marquages sémantiques

<em> et <strong>
L'élément d'emphase <em> sert à insister sur un texte. L'élément <strong> sert à donner plus d'importance à un texte. Exemple : l'italique est moins lisible sur écran, il convient d'en user avec parcimonie.
<i>
L'élément <i> sert à différencier des mots du texte principal, par exemple des termes techniques, ou des mots dans une langue étrangère, comme les locutions latines non francisées a priori ou modus vivendi.
<b>
L'élément <b> sert à distinguer un texte, sans lui apporter une importance particulière. Habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests, ou encore pour la première phrase d'un paragraphe.
<abbr> et <acronym>
L'élément <abbr> représente une abréviation et permet d'en fournir une description complète. Exemple : le CSS sert à habiller la structure HTML. L'élément <acronym> représentait une abréviation se prononçant comme un mot normal : y'a-t-il un ovni à l'OuLiPo ? Ce dernier ne doit plus être utilisé mais remplacé par <abbr>.
<dfn>
L'élément <dfn> marque le terme que définit le texte environnant. Par exemple, le courriel est le système de courrier électronique qui nous permet d'envoyer des messages à travers le monde.
<del> et <ins>
Les éléments <del> et <ins> sont utilisés pour marquer les parties d'un document qui ont été supprimées ou insérées. Par exemple, un shérif peut employer 35 suppléants.
<u>
L'élément <u> permet d'afficher un texte souligné. Il s'utilise de façon exceptionnelle, pour signaler un texte mal ortografié ou un nom propre chinois, par exemple : 汉代. Le soulignement est réservé aux hyperliens.
<mark>
L'élément <mark> sert à surligner certains mots par rapport au contexte, comme les résultats d'une recherche dans le document ou pour attirer l'attention sur certains mots d'une citation. Pour le même effet visuel, non sémantique, utilisez .mark.
<small> et <big>
L'élément <small> représente des annotations et des petits caractères comme les mentions légales ou liées au copyright. Comme l'élément <big> ne se limite qu'à de la présentation formelle, il ne doit plus être utilisé, mais remplacé par le sélecteur CSS .big.
<sub> et <sup>
Les éléments <sub> et <sup> marquent les indices et les exposants, par exemple : H2O et E=mc2. Ne pas confondre no et °C.
<time>
L'élément <time> représente une heure ou une date précise du calendrier grégorien et pour les rendre interprétables par un ordinateur. Née le et morte le à Londres, Ada Lovelace est considérée comme le premier programmeur du monde.

Pour obtenir le même effet visuel, non sémantique, utilisez les sélecteurs CSS homonymes : .i, .b, .del, .ins, .small, etc.

Autres enrichissements typographiques

Les enrichissements typographiques suivants ne sont pas disponibles en HTML natif et donc proposés en CSS par Tiny Typo :

  • .caps : Petites capitales
  • .quiet : Texte discret

Tailles de texte :

  • .smaller : smaller
  • .small : small
  • texte de base
  • .big : big
  • .bigger : bigger
  • .biggest : biggest

Titre de niveau h1

Chaque page web est identifiée par un titre, unique dans le site. C'est le titre de premier niveau du document. Il est balisé par l'élément HTML <h1>. 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.

Titre de niveau h2

Le titre ci-dessus est de niveau 2, balise <h2>. Il s'utilise après un élément <h1>, pour marquer un titre de niveau inférieur. 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.

Titre de niveau h3

Le titre ci-dessus est de niveau 3, balise <h3>. Il s'utilise après un élément <h2>, pour marquer un titre de niveau inférieur. 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.

Titre de niveau h4

Le titre ci-dessus est de niveau 4, balise <h4>. Il s'utilise après un élément <h3>, pour marquer un titre de niveau inférieur. 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.

Titre de niveau h5

Le titre ci-dessus est de niveau 5, balise <h5>. Il s'utilise après un élément <h4>, pour marquer un titre de niveau inférieur. 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.

Titre de niveau h6

Le titre ci-dessus est de niveau 6, balise <h6>. Il s'utilise après un élément <h5>, pour marquer un titre de niveau inférieur. 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.

Le chapeau, ici distingué par le sélecteur CSS .lead, est un texte généralement court, précédant le corps d'un article, et dont le but est d'en encourager la lecture, en résumant le propos qui va être développé.

Titre 1 avec lien et small

Ci-dessus, titre de niveau 1 : balise <h1>, avec <a> et <small>.

Titre 2 avec lien et small

Ci-dessus, titre de niveau 2 : balise <h2>, avec <a> et <small>.

Titre 3 avec lien et small

Ci-dessus, titre de niveau 3 : balise <h3>, avec <a> et <small>.

Titre 4 avec lien et small

Ci-dessus, titre de niveau 4 : balise <h4>, avec <a> et <small>.

Titre 5 avec lien et small

Ci-dessus, titre de niveau 5 : balise <h5>, avec <a> et <small>.

Titre 6 avec lien et small

Ci-dessus, titre de niveau 6 : balise <h6>, avec <a> et <small>.


Il est possible de styler d'autres éléments HTML comme des titres, avec .h1, .h2, .h3, etc.

Comme h1

Ci-dessus, balise avec sélecteur CSS .h1.

Comme h2

Ci-dessus, balise avec sélecteur CSS .h2.

Comme h3

Ci-dessus, balise avec sélecteur CSS .h3.

Comme h4

Ci-dessus, balise avec sélecteur CSS .h4.

Comme h5

Ci-dessus, balise avec sélecteur CSS .h5.

Comme h6

Ci-dessus, balise avec sélecteur CSS .h6.

Listes

Liste, avec <ul> :

  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant

Énumération, avec <ol> :

  1. Rouge tomate, chaud et dynamisant
  2. Vert sapin, naturel et équilibrant
  3. Bleu océan, profond et reposant
  4. Jaune soleil, vif et réjouissant

Liste de définitions, avec <dl>, <dd>, <dt> :

Internet
Réseau informatique internationnal qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux : le courriel, le Web et l'échange de fichiers.
Web
Le World Wide Web est le système hypertexte permettant de visiter des pages sur le réseau Internet.

Listes hétérogènes

  • Rouge
  • Orange
    • Dans la nature
      • Courges
        • Citrouille
        • Potiron
      • Carotte
      • Abricot
    • Objets frabriqués
      • Mimolette
      • Feu clignotant
      • Robe des moines boudhistes
  • Jaune
  • Vert
  • Bleu
  • Indigo
  • Violet
  1. Premier item
  2. Deuxième item
  3. Troisième item
  4. Quatrième item
  5. Cinquième item
    1. Premier
    2. Deuxième
      1. Premier
      2. Deuxième
        1. Premier
        2. Deuxième
        3. Troisième
      3. Troisième
    3. Troisième
  6. Sixième item
  7. Septième item

  • Exemple de liste ordinaire
  • les éléments d’une liste dans une phrase commencent par une minuscule et se terminent par une virgule, sauf le dernier élément qui, s’il termine la phrase, prend un point
    1. Exemple d'énumération
    2. Avec du texte long, pouvant s'écouler sur plusieurs lignes. Les éléments d’une liste formée de plusieurs phrases se comportent comme des alinéas (majuscule en début, point à la fin).
      • Troisième niveau
        • Chat
          1. Felix
          2. Kiki la Doucette
        • Chien
        • Perruche
      • Troisième niveau
      • Troisième niveau
Internet

Réseau informatique internationnal qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux :

  • le courriel,
  • le Web
  • et l'échange de fichiers.
Web
Le World Wide Web est le système hypertexte permettant de visiter des pages sur le réseau Internet.

Effets de style

Avec Tiny Typo, il est possible de varier le style des listes avec les sélecteurs CSS .list-none, .list-square, .list-disc, .list-circle ou .list-decimal :

  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
    • Lorem ipsum dolor sit amet
    • Consectetuer adipiscing elit
      1. Rouge tomate, chaud et dynamisant
      2. Vert sapin, naturel et équilibrant
      3. Bleu océan, profond et reposant
      4. Jaune soleil, vif et réjouissant
    • Nam egestas, neque ac semper dictum
    • Jaune soleil, vif et réjouissant
  • Nam egestas, neque ac semper dictum
  • Leo ante hendrerit ante

Listes horizontales

Il est possible d'afficher une liste à l'horizontale avec .list-inline :

  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant

Chaque liste horizontale peut être complétée avec .list-inline-sep, .list-inline-dash ou .list-inline-comma :

  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant

Tableaux de données

Autrefois employé pour mettre en page, l'élément HTML <table> n'est pas stylé par défaut. Utilisez systématiquement le sélecteur CSS .table et les éléments associés — <tbody>, <thead>, <tr>, <td>, <th> — pour baliser les tableaux de données. Indiquez un titre via l'élément <caption>.

Titre du tableau
entête R V B
footer footer footer footer
Red 255 0 0
Green 0 255 0
Blue 0 0 255

Un tableau présente des données, souvent chiffrées. Les tableaux de données doivent être titrés et les cellules reliées à leurs en-têtes.

Tableau à cellules fusionnées
# Fichier Valeur Evol % URL
1 Lorem ipsum dolor sit amet 1.38 -0.01 -0.36% URL
Consectetuer adipiscing elit 1.15 +0.02 1.32% URL
2 Nam egestas, neque ac semper dictum -0.04 -0.99% URL
3 Leo ante hendrerit ante 4.00 +0.06 2.04% URL

Citations, code et poésie

Citations

  • <q> : citation au fil du texte
  • <cite>  : titre d'œuvre

Voici une citation ordinaire, avec la balise HTML <blockquote>, où la source est précisée avec <small> :

Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.
Tim Berners-Lee, inventeur du Web.

Voici un exemple de citation au fil du texte (avec la balise HTML <q>), avec changement de langue : Mens sana in corpore sano, dixième Satire de Juvénal. 頑張ってください s'exclama-t-il alors.

Never doubt that a small group of committed people can change the world.
Indeed, it is the only thing that ever has.
Margaret Mead (1901-1978)

Les citations peuvent être imbriquées. Par exemple, le procès-verbal rapporte : La présidente clôtura la dernière réunion de l'année en disant : Je vous dis à tous et toutes : happy holidays! et أعيادا سعيدة et j'espère vous retrouver en pleine forme à la rentrée.

Code

Plusieurs éléments HTML servent à citer des fragments de code informatique :

  • <code> : extrait de code
  • <kbd> : raccourci-clavier
  • <samp> : extrait de script
  • <var> : variable
  • <tt>  : teletype

L'élément <pre> matérialise un bloc de texte pré-formaté, comme du code informatique ou de l'ASCII art :

! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Autre exemple, avec ligne longue :

string getContent( int $wordCount [, string $format = html] [, boolean $loremipsum = true] )

Contact

Le moyen de contacter les auteur·e·s du document se marque avec <address>, typiquement utilisé dans le <footer> :

Tiny Typo
42, rue du Web
Planète Terre
+33 1 41 59 26 53
tinytypo.tetue.net

Alignements et encadrés

Avec Tiny Typo, il est possible d'aligner les blocs et de créer des encadrés, par l'ajout de sélecteurs CSS :

  • .text-left : ferre le texte à gauche
  • .text-right : ferre le texte à droite
  • .text-center : centre le texte
  • .text-justify : justifie le texte
  • .box : encadré

Aides au positionnement :

  • .left : positionne le bloc à gauche
  • .right : positionne le bloc à gauche
  • .center : centre le bloc
  • .clear : espaceur de blocs flottants
  • .clearfix : espaceur de blocs flottants
  • .p : marge basse, calée sur la grille

Alignements

Texte justifié avec .text-justify. Il est possible de justifier le texte, c'est-à-dire que toutes les lignes d'un paragraphe aient la même longueur. Est-ce intéressant de le faire ? D'un point de vue de lisibilité, des études montrent qu'un texte en drapeau est plus accessible à l'œil : l'irrégularité des fins de lignes sert de repère visuel et fatigue moins le lecteur. Pourtant, un alignement justifié donne un résultat esthétique plus agréable et une impression de plus grande régularité.
Lire le conseil sur ergologique.com : Le texte se justifie-t-il ?

Texte ferré à gauche avec .text-left. Il ne faut pas confondre le terme de justification avec l'expression « justifié » à gauche ou à droite souvent employée à tort à la place de « ferré » à gauche ou à droite. Les textes sont par défaut ferrés à gauche et sont par nature, selon la taille de l'écran, sa définition et la taille de la fenêtre dans laquelle le texte apparaît, d'une justification plus ou moins longue.

Texte centré avec .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. 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.

Texte ferré à droite avec .text-right. Le terme de « fer » vient de la façon dont le compositeur alignait les lignes sur son composteur en typographie : les lignes étaient alignées sur le « fer » à gauche, sur la partie mobile du composteur, afin de créer un « drapeau » à droite ; elles étaient « ferrées » à droite, sur la partie fixe du composteur, afin de créer un « drapeau » à gauche.

Encadrés

Les encadrés, typiquement <aside>, sont caractérisés par le sélecteur CSS .box. Ils peuvent être positionnés avec .left, .right et .center, et ferrés avec les classes précédentes.

Maecenas fringilla dignissim venenatis. Donec ut mi a odio sagittis facilisis. Fusce in risus elit. In quam turpis, elementum et elementum rutrum, dictum quis nibh. Morbi iaculis eros in purus pellentesque accumsan pellentesque sem porttitor. Aliquam erat volutpat. Donec vitae luctus neque.

Maecenas fringilla dignissim venenatis. Donec ut mi a odio sagittis facilisis. Fusce in risus elit. In quam turpis, elementum et elementum rutrum, dictum quis nibh. Morbi iaculis eros in purus pellentesque accumsan pellentesque sem porttitor. Aliquam erat volutpat. Donec vitae luctus neque.

Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.

Mauris lacinia, ante id sodales pretium, eros est gravida sapien, nec auctor dolor massa a dui. Vivamus consequat suscipit elit in imperdiet. In consectetur varius tortor, vel dictum ipsum dignissim vel. Nulla faucibus suscipit ipsum non porttitor. Fusce non ante non mi adipiscing faucibus. Sed odio risus, malesuada eget placerat id, semper eget turpis. Cras ante lorem, pretium ut vestibulum nec, vehicula eget orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel lectus eget tortor cursus dapibus sit amet imperdiet lacus. Nullam purus ipsum, aliquet eget imperdiet scelerisque, interdum in felis. Maecenas dolor eros, iaculis et pretium ac, eleifend sit amet lacus. Etiam a lacus eget dui aliquet tempor. Duis dapibus magna dictum enim ultrices ac pharetra lacus convallis. Donec felis ipsum, tristique ornare fermentum quis, fringilla nec arcu. Nunc tortor arcu, fermentum in dictum sit amet, aliquam eu ante. Integer volutpat, erat cursus posuere rutrum, erat tellus varius erat, quis tempus eros risus a lacus.

Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.

Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing. Fusce leo nibh, placerat sed fringilla id, accumsan eget libero. Sed lorem augue, cursus in volutpat in, iaculis ut ante. Suspendisse sed lectus sed arcu fermentum aliquet. Donec elementum, elit non feugiat lobortis, lectus sapien tincidunt nisl, quis commodo leo lectus ut felis. Pellentesque id diam ante.

Medias et albums

Les éléments <figure> et <figcaption> fonctionnent ensemble pour associer une légende à une image ou autre média. Ces illustrations peuvent être positionnées avec .left, .right et .center.

La légende est un court texte accompagnant une photo ou un dessin et visant à lui donner un sens. Elle peut se placer avant ou après le media principal.
Lire : HTML5 : Éléments <figure> et <figcaption>

Paragraphe précédé d'une image centrée. Praesent egestas turpis ut risus lacinia eu cursus urna dapibus. Donec nibh enim, pulvinar vitae ornare ut, ultrices sit amet neque. Quisque ultrices venenatis mi, id fringilla eros malesuada a. Curabitur sagittis mollis arcu, sit amet scelerisque magna varius ac. Vivamus ullamcorper vulputate ipsum, adipiscing varius leo porttitor a. Curabitur luctus gravida nibh, sit amet auctor metus vulputate quis. Aliquam eu nulla risus. Cras in suscipit odio. Etiam ut nisl ut velit ornare pharetra a sed lacus.

Titre de l'image
© copyright

Paragraphe précédé d'une image calée à gauche. Mauris lacinia, ante id sodales pretium, eros est gravida sapien, nec auctor dolor massa a dui. Vivamus consequat suscipit elit in imperdiet. In consectetur varius tortor, vel dictum ipsum dignissim vel. Nulla faucibus suscipit ipsum non porttitor. Fusce non ante non mi adipiscing faucibus. Sed odio risus, malesuada eget placerat id, semper eget turpis. Cras ante lorem, pretium ut vestibulum nec, vehicula eget orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel lectus eget tortor cursus dapibus sit amet imperdiet lacus. Nullam purus ipsum, aliquet eget imperdiet scelerisque, interdum in felis. Maecenas dolor eros, iaculis et pretium ac, eleifend sit amet lacus. Etiam a lacus eget dui aliquet tempor. Duis dapibus magna dictum enim ultrices ac pharetra lacus convallis. Donec felis ipsum, tristique ornare fermentum quis, fringilla nec arcu. Nunc tortor arcu, fermentum in dictum sit amet, aliquam eu ante. Integer volutpat, erat cursus posuere rutrum, erat tellus varius erat, quis tempus eros risus a lacus.

En bonne théorie, aucune photo ne devrait
paraître sans sa légende.
© copyright

Paragraphe précédé d'une image calée à droite. Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.

Album

Il est possible de regrouper plusieurs images pour constituer un album, avec .album.

Mon album de vacances. Je me suis bien amusée !

Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing. Fusce leo nibh, placerat sed fringilla id, accumsan eget libero. Sed lorem augue, cursus in volutpat in, iaculis ut ante. Suspendisse sed lectus sed arcu fermentum aliquet. Donec elementum, elit non feugiat lobortis, lectus sapien tincidunt nisl, quis commodo leo lectus ut felis. Pellentesque id diam ante.

Effets de style

Avec Tiny Typo, les images peuvent recevoir des effets de style, avec .shadow et .border et leurs angles peuvent être arrondis avec .round et .circle.




Vignettes

Les vignettes sont distinguées par la classe .thumb, par défaut sans effet.

Esque this quidam. Aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni versus quidam.

Esque this quidam avec vignette positionnée avec .right. Aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni versus quidam.

Esque this quidam avec vignette positionnée avec .left. Aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni versus quidam.


Télécharger

Installation

Téléchargez. Déposez le fichier tinytypo.css dans votre répertoire css/. Utilisez Tiny Typo dans vos pages :

<link rel="stylesheet" type="text/css" href="css/tinytypo.css">

C'est tout !

Page de test

Utilisez la page tinytypo.html pour tester votre style. Cette page affiche tous les éléments HTML natifs qui servent à rédiger sur le Web, tant HTML5, XHTML que HTML 4. Elle permet de prévisualiser les styles appliqués. Pour tester les styles en vigueur dans votre site, utilisez cette page seule — sans aucune des feuilles de style de Tiny Typo, mais avec les vôtres.

Usage avancé

Pour que vous puissiez choisir seulement ceux dont vous avez besoin, Tiny Typo est répartie en plusieurs fichiers :

reset.css
Vous pouvez remplacer cette feuille par le reset de votre choix, par exemple normalize.css.
clear.css
Aides à la composition (alignements, espaceurs de blocs). Si vous utilisez un framework CSS, il est fort possible que cette feuille soit inutile.
font.css
Cette feuille est vierge. Elle sert à déclarer les polices de caractères que vous souhaitez utiliser.
typo.css
Base typographique définissant tous les éléments HTML ainsi que textes alignés, encadrés, etc. C'est la feuille principale de Tiny Typo.
links.css
Base signalétique des hyperliens.
media.css
Styles pour les médias, figures et albums.
custom.css
Cette feuille est vierge : elle est destinée à accueillir vos propres styles.

Variables LESS

Tiny Typo est paramétrable. Si vous souhaitez personnaliser davantage, redéfinissez ces variables LESS (dans var.less) :

Variables LESS
Variable Usage Valeur par défaut
Couleurs @color-bg Couleur du fond #f8f8f8
@color-txt Couleur du texte #222
@color-mid Couleur pour gris moyen et filets #666
@color Couleur principale du thème #900
Fonts @font1 Corps de texte principal serif
@font2 Titraille sans-serif
@font3 Code monospace
@font4 Alternative, fantaisie (facultative) fantasy
Typo @font-size Taille de texte de base 1em
@line-height Interligne 1.5
@p Marge basse des paragraphes @line-height
@alinea Alinea @line-height
Liens @color-link Couleur des liens @color-txt
@color-link-hover Couleur des liens survolés darken(@color-link, 15%)

Développement

Tiny Typo est développée avec amour par Romy Duhem-Verdière, sur Github, et distribuée sous licence MIT.