Organiser son rythme typographique avec Sass

Guide pour une bonne expérience de lecture

Sass & typographie, une solution élégante
Par David Leuliette le

Quand il s’agit de faire du design, j’ai toujours accordé une attention particulière à la typographie. En tant que développeur front-end, c’est l’une des premières choses que je mets en place pour mes nouveaux projets. J’ai déjà donné des conseils pour avoir une bonne expérience de lecture, et je commence généralement par styler les paragraphes.

La question que l’on peut se poser est la suivante : Comment organiser sa typographie sur l’intégralité des feuilles de styles CSS ?

J’ai déjà rencontré ce problème — un bon nombre de fois — et voici mes solutions.

Logo sass et typographie

Principes de base avec Sass

Comme les meilleurs joueurs de golf : codez le moins de lignes possible. J’ai vu un bon nombre de projets où les développeurs ont écrit & re-écrit du code sans en avoir besoin, cela ajoute plus de maintenance et détruit notre santé mentale.

Coder pour le système. La logique d’un designer est de créer des éléments graphiques et d’utiliser des variations. Vous devez chercher le plus petit dénominateur commun entre les éléments de votre interface, et les enrichir au besoin.

Rendez vous la vie plus facile. Utilisez un preprocesseur (le reste de cet article présente des solutions avec Sass) et utilisez intelligemment ses fonctionnalités.

Organiser son projet

Choisissez le design de votre chorégraphie du contenu. Je commence souvent par des bases saines : styler le paragraphe. C'est à cette étape que je vais mettre en place l’impact visuel de manière générale. Grâce aux styles en cascade, pas besoin de créer de nouvelles règles typographiques pour vos balises <p>, <li>, <dt>

Configurez votre tableau de polices. Dans la plupart des systèmes, il existe 3 familles (En avoir plus devient un problème de performance). Généralement un type serif, sans-serif ou encore monospace. Avec ces informations, je peux créer des variables Sass dès le début de mon projet :

  $font-family-sans-serif: 'Lato', Helvetica, Roboto, Arial, sans-serif;
  $font-family-serif:      'Merriweather', Georgia, 'Times New Roman', serif;
  $font-family-monospace:  'Ubuntu Mono', 'Monaco', monospace;

Commencez par l’élément body. C’est une chose qui améliore notre santé mentale et c’est l’élément le plus important de cet article.

Si vous appliquez le design typographique de votre paragraphe <p> à votre élément <body>, cela vous évitera beaucoup de travail.

Vous avez identifié à l’étape 1 le plus petit dénominateur commun, vous pouvez donc appliquer tout le style sur l’élément <body>.

Cette solution a 3 avantages :

  • Cela vous évite des déclations de font-family, font-weight, color
  • Une meilleure cohérence, peu de déclarations facilite la maintenance.
  • Vous gagnez du temps, les styles s’appliquent sur toute votre interface.

Voici un exemple avec body:


   // 1. Prevent iOS and IE text size adjust after device orientation change,
   //    without disabling user zoom.

  body {
    -ms-text-size-adjust: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 1 */
    background: $body-bg;
    color: $text-color;
    font-family: $font-family-sans-serif;
    font-weight: $font-weight-bold;
  }

Vous pouvez faire des déclaration de font-family, font-weight, color, ou encore line-height. C’est tout, il est dangereux de surcharger l'élément <body>.

Avec ce style en place, vous pouvez commencer à styler vos éléments en utilisant le moins de code possible. En utilisant ce système, il est bien plus facile de gérer sa typographie.

  h1 {
    font-family: $font-family-serif;
  }

Puisque vous avez déjà vos différentes polices de caractères déclarées dans des variables, vous pouvez changer d’avis beaucoup plus rapidement.

Entre design & seo

Le développeur front-end est la colonne vertébrale d’un projet web. Il arrive fréquement que graphistes et consultants seo lui demandent des modifications contradictoires.

Certaines choses doivent avoir un impact visuel et d’autres doivent être optimisées pour le référencement d’un site web. Typographie Sass et optimisation seo

The star wars naming sur foundation-boilerplate

La solution est d’avoir un système qui peut être appliqué en dehors des balises titres h1, h2, h3

  // @extend directive is a dark side power of the force, use it carefully
  .emperor {
    @extend h1;
    text-transform: uppercase;
  }
  .vador {
    @extend h2;
    font-weight: $font-weight-bold;
  }
  .maul {
    @extend h3;
    font-style: italic;
  }

Cette solution élagante — qui fonctionne — est proposée par le Designer Andrew Clarke.

J’espère que ce guide récapitulant les étapes de base vous aidera dans votre prochain projet. Si vous avez d’autres façons d’orchestrer votre typogaphie, contactez moi sur twitter.