Présentation

Tiny Typo est une base CSS pour le contenu éditorial web, prête à l'emploi, pour des pages web lisibles, sur tous les supports.

Démo
(et documentation)

Tiny Typo fait le minimum typographique nécessaire à la rédaction de documents web.

Facile à utiliser, elle vient compléter votre reset habituel pour servir de base à vos propres styles, sans fioriture, de façon non intrusive. Faite de HTML et CSS, elle est simple et robuste, très légère (sans image, ni fonte, ni JavaScript). Elle est personnalisable en LESS.

Tiny Typo est respectueuse des standards W3C, naturellement responsive, prévue pour l'écran et l'impression, pour le multilinguisme et soucieuse d'accessibilité.

Ils utilisent Tiny Typo : Poche, romy.tetue.net, etc.

Télécharger

Télécharger Tiny Typo
(.zip - 35 Ko)

Comment utiliser Tiny Typo ?

1. Installez

Vous pouvez utiliser Tiny Typo de plusieurs façons : en une seule feuille CSS, tout simplement, ou prendre juste ce dont vous avez besoin, de façon modulaire, avec ou sans preprocessing. Commme vous préférez !

En CSS seul (simple, facile et immédiat)

  1. Téléchargez, dézippez.
  2. Déposez le fichier tinytypo.css dans votre répertoire css/.
  3. Utilisez Tiny Typo dans vos pages (juste après votre reset.css habituel) :

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

    C'est tout !

Quelques feuilles (usage avancé, modulaire)

Pour que vous puissiez choisir seulement ceux dont vous avez besoin, Tiny Typo est répartie en plusieurs fichiers (selon la nomenclature Daisy).

  1. Téléchargez, dézippez.
  2. Déposez les fichiers CSS dans votre répertoire css/.
  3. Appelez ceux dont vous avez besoin dans vos pages.

Attention, les feuilles de Tiny Typo doivent s'utiliser dans cet ordre :

  1. reset.css
    Vous pouvez remplacer cette feuille par le reset de votre choix.
  2. clear.css
    Aides à la composition (alignements, espaceurs de blocs). Si vous utilisez un framework CSS, il est fort possible que cette feuille soit inutile.
  3. font.css
    Cette feuille est vierge. Elle vous servira à déclarer les polices de caractères que vous souhaitez utiliser.
  4. 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.
  5. links.css
    Base signalétique des hyperliens.
  6. media.css
    Styles pour les médias, figures et albums.

Avec LESS (variables à paramètrer)

Générée via preprocessing LESS, Tiny Typo est paramétrable, ce qui vous permet une personnalisation plus poussée.

  1. Téléchargez, dézippez.
  2. Déposez les fichiers LESS dans votre répertoire less/.
  3. Redéfinissez les variables du fichier var.less à votre goût.
  4. Compilez le fichier tinytypo.less.
  5. Appelez le fichier CSS généré, tinytypo.css, dans vos pages (après votre reset préféré).
Variables LESS de Tiny Typo
Variable Usage courant 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 du texte de base 1em
@line-height Interligne 1.5
@p Marge 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%)

2. Personnalisez

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 : ajoutez vos déclrations CSS dans un nouveau fichier, nommé par exemple custom.css, appelé à la suite de Tiny Typo.

Des sélecteurs CSS bien pratiques, complétant le HTML natif, sont mis à disposition pour vous faciliter la vie. Ils sont présentés dans la page de démo, qui sert également de documentation. Utilisez-les dans vos pages HTML.

3. Testez

Utilisez le fichier tinytypo.html pour visualiser et vérifier vos styles. 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.

Vous pouvez utiliser ce fichier seul (sans aucune des feuilles de style de Tiny Typo), sur n'importe quel projet web. C'est une page de test indépendante.

Ce fichier, démonstratif et explicatif, sert également de support pédagogique.