Personnaliser Tiny Typo via CSS

Tiny Typo est installée dans votre site. C’est bien mais un peu fade… Comment personnaliser ?

Pour faciliter la personnalisation, très peu de couleurs et polices sont déclarées dans la base Tiny Typo. À vous de compléter avec vos couleurs et polices, dans votre propre feuille de style.

  1. Affichez la page de test en ajoutant « /squelettes/tinytypo.html » à l’adresse de votre site, par exemple :
    http://www.monsite.net/squelettes/tinytypo.html
  2. Écrivez vos personnalisations dans votre fichier CSS, nommé par exemple custom.css ou perso.css. Si ce fichier n’existe pas, créez-le et déposez-le dans votre dossier squelettes. Inspirez-vous du fichier custom.css donné en exemple.

Personnalisations principales

Ces premières personnalisations doivent se trouver au début de votre fichier CSS. Procédez dans l’ordre :

1. Choisissez vos couleurs

Couleur de fond et de texte se définissent en une fois sur body. Par exemple :

  1. body { background: #F8F8F8; color: #222222; }

N’hésitez pas à choisir un contraste négatif (blanc sur noir) si vous préférez : Tiny Typo s’adaptera automatiquement. Utilisez éventuellement un motif de fond, déposé dans /css/img et appelé comme suit :

  1. body { background: #333 url(img/background.png) repeat; color: #EEE; }

2. Choisissez vos fontes

Le choix d’une police de caractères est déterminant : c’est ce qui donnera une personnalité à votre site. Celle-ci se définit en une fois sur body. Par exemple :

body,
.font1 { font-family: Georgia, "Times New Roman", serif; }

Vous pouvez choisir une autre police de caractères pour vos titres (facultatif). Si vous le faites, n’en oubliez pas :

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.font2 { font-family: Helvetica, Arial, sans-serif; }

Vous pouvez aussi personnaliser la fonte affichant le code (facultatif). Si vous le faites, n’oubliez pas les sélecteurs propres à SPIP :

pre, code, var, samp, kbd, tt, .tt,
.spip_code, .spip_cadre,
.font3 { font-family: "Courier New", Courier, monospace; }

Astuce : vous pouvez ensuite utiliser les sélecteurs .font1, .font2, etc. dans vos squelettes, partout où vous souhaitez appliquer l’une ou l’autre de ces fontes.

3. Ajustez la taille du texte (facultatif)

Avec Tiny Typo, la taille du texte est à 100 %. Cela signifie que le texte s’affichera à la taille adaptée à l’écran utilisé, généralement 16px sur écran de bureau, 14px sur smartphone, etc. Si vous souhaitez grossir la taille de texte de votre site (pour le confort de lecture de vos internautes, évitez de la réduire), cela se définit en une fois, sur body. Par exemple :

  1. body { font-size: 110%; }

Remarque : si vous touchez à la taille du texte, exprimez-la en unité relative (%em ou rem) afin d’assurer la lisibilité en cas de zoom du texte par l’internaute.

Utilisez ensuite les class .small et .big dans vos squelettes, là où vous souhaitez que le texte soit plus petit ou plus gros.

4. Ajustez l’interlignage (facultatif)

L’interlignage (espace entre les lignes de texte) se définit sur body, une fois pour toutes. Par exemple :

  1. body { line-height: 1.8; }

Remarque : la valeur minimale recommandée est de 1.5 : pour le confort de lecture de vos internautes, évitez de descendre en deçà.

5. Ajustez vos titres

Ce n’est pas tout d’avoir une belle police, il faut aussi que les différents textes (titres, sous-titres, texte principal, etc.) aient des proportions différentes mais agréables à l’œil pour faciliter la lecture.

Chaque site utilise une échelle de titres différente et c’est plus délicat à définir. Aidez-vous d’un calculateur d’échelle typo, comme type-scale.com ou modularscale.com. Écrivez ensuite les règles CSS correspondantes dans votre fichier, par exemple :

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 { margin: 1.414em 0 0.5em; color: #AA0000; }
h1, .h1 { margin-top: 0; font-size: 3.998em; }
h2, .h2 { font-size: 2.827em; }
h3, .h3 { font-size: 1.999em; }
h4, .h4 { font-size: 1.414em; }

Astuce : vous pouvez ensuite utiliser les sélecteurs .h1, .h2, .h3, etc. dans vos squelettes, pour appliquer le style de l’un ou l’autre de ces titres, partout où vous le souhaitez.

Personnalisations secondaires

Vous pouvez vous arrêter là, car Tiny Typo fait le reste. Mais vous pouvez aussi souhaiter d’autres ajustements.

Liens

Bien que ce ne soit pas nécessaire avec Tiny Typo, il est courant de souhaiter personnaliser les liens. Par exemple, pour les souligner plus délicatement :

a {
  text-decoration: none;
  border-bottom: 1px solid;
}

Pour modifier leur apparence lors des interactions, définissez dans l’ordre :focus, :hover et :active. Par exemple pour modifier leur couleur lors des interactions :

a:focus,
a:hover,
a:active {
  color: #0000ff;
}

Tiny Typo renforce le style du focus, pour aider les internautes naviguant au clavier. Mais si cela est trop gênant, annulez comme suit :

a:focus {
  background: transparent !important;
  border-color: transparent !important;
}

Autres personnalisations

Amusez-vous bien et n’hésitez pas à poser vos questions dans le forum ci-dessous !

Pour en savoir plus, lire : Améliorer la lisibilité typographique

Dernière modification de cette page le 11 juillet 2018

Discussion

Aucune discussion

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom