Pourquoi Tiny Typo ?

Écrire sur le web ne saurait se faire sans le langage HTML. C’est lui qui structure le contenu, c’est-à-dire qui lui donne sens, pour le rendre compréhensible des machines qui le diffusent, afin de faire passer le message jusqu’au lecteur.

En plus des éléments d’interaction et de mise en page, HTML inclut des éléments de marquage sémantique du contenu. C’est la base. Alors qu’on peut réaliser un site sans formulaire, avec une mise en page minimaliste, on ne saurait — quel que soit le site — se passer de titres, de paragraphes, de liens, de listes, etc.

Pourtant cette base sémantique HTML n’est pas toujours stylée de façon à être perceptible et compréhensible par les humains. Les rédacteurs web cherchent donc d’autres moyens pour mettre en forme… à tort, car HTML est déjà riche de possibilités. Celles-ci restent mal connues. Souvent utilisées de façon partielle, ces balises sémantiques sont plus nombreuses qu’on ne le croit de prime abord.

Faire le minimum nécessaire

J’ai donc listé tous les éléments HTML utiles à la rédaction web, pour les réunir en une seule page, d’abord pour tester mon travail d’intégration : vérifier le rendu graphique de chaque élément et m’assurer de ne pas en oublier. Je commence toujours par là.

La première chose à faire, en intégration, après le reset, est de définir les éléments constitutifs du document web. Car c’est avec ces briques élémentaires que se construit toute page. C’est le minimum nécessaire.

Pourtant, aucun des frameworks CSS que j’ai étudié ne couvre complètement ce besoin. Ils règlent des problèmes plus complexes, mais négligent un peu la base. Ici, ce sont les listes de définition qui ne sont pas stylées, là ce sont les citations au fil du texte… ce qui a pour conséquence, gênante, de les rendre imperceptibles. J’ai donc voulu combler ce manque.

Parce que c’est une base CSS, et non pas un framework complet, parce que ça fait le minimum, lequel est surtout typographique, ça s’appelle Tiny Typo.

Améliorer la lisibilité

Essentiellement typographique, la mise en forme de ces éléments HTML utiles à la rédaction web est ce qui rend le texte intelligible. Or de nombreux sites web restent difficiles à lire. J’ai voulu rendre visible la sémantique HTML. Et améliorer la lisibilité.

En cette époque de grande diversification des terminaux, il est important de savoir revenir à l’essentiel, de redécouvrir que l’on peut déjà beaucoup avec peu, au plus proche du HTML. Je me suis appuyée sur les recommandations de lisibilité améliorant l’accessibilité, sans perfectionnisme ni avant-gardisme, pour ne pas complexifier.

Concrètement, il s’agit surtout d’employer une unité relative pour la taille du texte, ici 1em, afin d’en permettre le zoom, d’augmenter l’interlignage, à 1.5, et de respecter le rythme vertical. En exagérant un peu, on pourrait dire que ce sont les trois valeurs principales de Tiny Typo.

Je pense sincèrement que cela devrait suffire pour faire un site. Le reste est superflu. Ne dit-on pas que le webdesign est à 95 % typographique ? C’est en tout cas le socle. Libre à vous d’en rajouter.

Facile à utiliser

Ce n’est pas une boîte noire hermétique, ni une usine à gaz multifonctions, n’ayez pas peur ! C’est une base CSS prête à l’emploi, mais également personnalisable et décortiquable, pour bidouiller et DIY.

Pour faciliter la personnalisation, un minimum de couleurs et polices sont déclarées. À vous de compléter dans votre propre feuille de style. La base Tiny Typo est donc légère : ni fonte, ni image, ni JavaScript… elle n’est constituée que de HTML et de CSS, rien de plus. Ce qui est aussi une façon de montrer les possibilités du langage HTML par l’exemple, sans se noyer dans la lecture des spécifications.

Si la démo est réalisée en HTML5, Tiny Typo fonctionne aussi bien avec les versions antérieures, XHTML et HTML 4, y compris sur les vieux sites construits en <table> !

Enfin, j’ai voulu que la prise en main, l’installation, soit la plus simple possible. Cette base est donc disponible sous la forme d’un fichier unique, une feuille de style, tout simplement. Avec une démo documentée, elle-même en une seule page. Pour en savoir plus, fouillez le code : il contient des liens vers des articles explicatifs.

Usages avancés

Facultatifs mais bien pratiques, des sélecteurs CSS complétant le HTML natif sont mis à disposition pour vous faciliter la vie. Pour résumer, vous disposez de classes homonymes à chaque élément HTML, afin de pouvoir appliquer le même rendu que celui-ci, mais sur un élément différent.

Pour que vous puissiez choisir seulement ceux dont vous avez besoin, Tiny Typo est répartie en plusieurs fichiers (selon la méthode Daisy). Vous pouvez ainsi l’ajouter plus facilement à votre framework habituel. Elle est aussi paramètrable avec quelques variables LESS.