Onglet Typographie

Introduction

Via Oxygen Builder, vous pouvez facilement modifier l'apparence de vos textes et de vos titre grâce à de nombreuses options très précises.

Ce guide vous montre comment gérer modifier la typographie d'un seul élément. Si vous souhaitez appliquer vos réglages à plusieurs ou à l'ensemble de vos textes et titres, vous pouvez utiliser une classe ou configurer vos paramètres de style dans l'onglet Settings.

Procédure

Pour commencer, ouvrez une page avec Oxygen et sélectionnez l'élément que vous souhaitez modifier. Si vous ne savez pas comment faire, consultez notre guide de prise en main.

Une fois l'élément voulu sélectionné, cliquez sur l'onglet typographie dans la barre d'édition de gauche (4e onglet), qui vous permettra d'accéder aux options.

• Font Family : la police qui est utilisée. Par défaut, elle est définie en Inherit, ce qui signifie que l'élément copie la police qui a été définie dans les paramètres de style.

• Font Size : La taille de la police, calculée en px. les texte ont généralement une taille comprise en 14 et 18px, tandis que les titres oscillent souvent entre 20px et 50px

• Color : la couleur de votre texte.

• Font Weight : définit la graisse de votre texte, c'est-à-dire l'épaisseur de la police, qui va de 100 à 900
  • 100 correspond à une police extrêmement fine
  • 400 correspond souvent à une police normale
  • 700 correspond généralement à une police assez grasse ...

Les graisses sont variables en fonction des polices. Certaines ne sont pas disponible dans toutes les graisses. Si vous passez par exemple d'une graisse de 400 à 500 et que rien ne change, c'est qu'il n'y a tout simplement pas de graisse en 500.

• Text align : Similaire à un document Word. Définit comment doit être aligné votre texte.

• Text decoration : définit si votre texte doit comportant une décoration : soulignement, texte barré ... Par défaut, cette opiton est définie sur none.

• Text transform : Définit les majuscules.
  • Capitalize met des majuscules au début de chaque mot
  • Uppercase met tout le texte en majuscule
  • Lowercase met tout le texte en minuscule

• Font-smooth : Option avancée définissant le rendu du texte. Inutile dans une utilisation normale.

Les tailles de titre

Il existe plusieurs tailles de titres qui plus ou moins grands . Ils sont associé à une balise h(x) en fonction de leur importance :

• h1 : Titre principal de la page : il n'y en a qu'un seul par page
• h2 : Titre secondaire : utile pour séparer la page en plusieurs sections
• h3 : Titre tertiaire : utile pour séparer une section en sous-section.
• h4 ...

C'est un peu comme si vous faisiez une dissertation. Plus votre page est bien organisée, plus elle est facile à lire pour vos utilisateurs et les moteurs de recherche, ce qui améliore la qualité globale de votre site.

Lorsque vous cliquez sur un titre dans la barre de structure (à droite), la barre d'édition (à gauche) vous affichera directement cette option. Localisez le champ tag et choisissez votre taille de titre.

Vous pouvez aussi modifier les tailles de titres par défaut en utilisant les paramètres globaux de style.

Conseils divers

Attention à l'élément sélectionné !

Assurez-vous d'avoir bien sélectionné un élément de texte (élément avec un H ou un t), et pas une div (élément avec une icône de rectangle). Vos modifications risqueraient de ne pas bien s'appliquer.

Si vous avez une div qui contient plusieurs textes, vous pourriez être tenté de configurer les options au niveau de la div pour qu'elles s'appliquent à tous les éléments enfants. C'est possible, mais c'est une mauvaise pratique, car vous risquez de vous empêtrer rapidement dans de multiple règles contradictoires. Préférez plutôt l'emploi de classes dans ce type de cas.

ID et classes

Les ID priment sur les classes. Si vos modifications ne s'appliquent pas, c'est peut-être parce que vous faites vos modification au niveau de la classe, alors que votre élément a subi des modifications au niveau de l'ID.

Pour en savoir plus, consultez notre guide dédié.