Documentation en français du builder Oxygen

Typographie

Les options disponibles

Contrôlez l’apparence de votre texte avec les paramètres dans Advanced > Typography.

Font Family – Famille de Police

Ce paramètre spécifie la police d’un élément

Par défaut, Oxygen vous permet de choisir parmi plus de 800 polices Google. Comme il existe de nombreuses polices dans Google Fonts, il ne serait pas pratique de les afficher toutes en même temps dans la liste. Pour utiliser une police de la bibliothèque Google, cliquez sur la liste déroulante Font Family, puis commencez à saisir le nom de la police.

Lisez l’article sur les polices globales pour plus d’informations sur l’ajout de polices personnalisées ou le lien entre Oxygen et Typekit.

Font Size – Taille de Police

Défini la taille de la Police.

Color – Couleur

Défini la couleur du texte.

Font Weight – Graisse, Épaisseur

Défini la graisse de la police : thin, light, normal, semi-bold, bold, heavy, ….
Une valeur de 400 correspond à une graisse normal, standard ; 300 correspond à du light ; 700 à du bold, etc.

Text Align – Alignement du texte

Défini l’alignement du texte.

  • Left (gauche) – Aligne le texte à gauche.
  • Right  (droite)– Aligne le texte à droite.
  • Center (centrer) – Centre le texte.
  • Justify (justifié) – Étire les lignes de sorte que chaque ligne ait une largeur égale (comme pour les journaux et les magazines).

Line Height – Hauteur de ligne

Défini l’espace vertical utilisé par une ligne de texte. Oxygen recommande d’utiliser une hauteur de ligne sans unité, c’est-à-dire juste un nombre, sans spécifier px, ni em ni %

Lorsqu’une hauteur de ligne sans unité est utilisée, le navigateur la multiplie automatiquement par la taille de la police pour calculer la hauteur de ligne finale. Par exemple, une hauteur de ligne de 1,5 et une taille de police de 14px donneraient des lignes d’une hauteur de 21px.

Si vous souhaitez utiliser une unité, tapez-la simplement après le numéro, par exemple, « 21px »

Letter Spacing – Espace entre les lettres (approche)

Ce paramètre augmente ou réduit l’espace entre les caractères du texte.

Text Decoration – Décoration du texte

  • none (aucun/sans)– Valeur par défaut.
  • underline (souligné) – Le texte sera souligné (filet sous le texte)
  • overline (surligné) – Le texte sera surligné (filet au-dessus du texte)
  • line-through (barré) – Une ligne sera barrera sur le texte.

Style

  • normal – Valeur par défaut.
  • italic (italique) – Le texte sera en italique.

Transformation

Ce paramètre permet de gérer la 'casse' (minuscules / capitales) du texte.

  • none – Aucune capitalisation. Le texte est rendu tel quel.
  • capitalize (capitaliser) – Transforme le premier caractère de chaque mot en majuscule
  • uppercase (majuscule) – Transforme tous les caractères en majuscules.
  • lowercase (minuscule) – Transforme tous les caractères en minuscules.

Font Smoothing – Lissage

Ce paramètre contrôle l’application de l’anti-aliasing lors du rendu des polices.
L’anti-aliasing a pour effet de ’lisser’ le contour des caractères.
Il y a trois options disponibles :

  • initial – Est utilisé par défaut. Dans ce mode, le navigateur décide quand utiliser un sous-pixel pour l’anti-aliasing.
  • antialiased – Lisse la police au niveau du pixel, par opposition au sous-pixel (cf. ci-après). Le passage du rendu sous-pixel à l’antialiasing pour du texte clair sur des arrière-plans sombres le rend plus clair.
  • subpixel-antialiased – Sur la plupart des affichages non-retina*, cela donnera le texte le plus net.
    écran retina => écran à très densité (la taille des pixels écran est particulièrement petite, imperceptible pour l'œil humain)

Tenez compte des conseils suivants lorsque vous modifiez le lissage des polices:

  • Lorsque vous placez du texte clair sur un fond sombre, changez le lissage de la police en anti-aliasé.
  • Lorsque vous placez du texte sombre sur un arrière-plan clair, laissez le lissage de la police tel quel.

Recommandation : n’utilisez pas ce paramètre avant d’avoir lu cet excellent article sur le lissage des polices:  http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Greg C. / Ph. Reskator

Besoin d’un complément d’information ? Retrouvez-nous sur le groupe de soutien
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram