5 façons simples d'améliorer la typographie Web
Le type est l'un des éléments les plus utilisés du Web. Penses-y. À moins que vous ne soyez YouTube ou Flickr, il est probable que les visiteurs de votre site viennent chercher votre contenu textuel - et non le packaging sophistiqué qui l'entoure. Alors, pourquoi les concepteurs Web traitent-ils toujours le texte comme un élément secondaire?
Une bonne typographie apporte de l'ordre à la page et augmente la lisibilité . Il permet aux utilisateurs de traiter les informations plus rapidement.
Un site plus lisible et lisible signifie des visiteurs heureux. Les visiteurs heureux retournent souvent, achètent des produits, laissent des commentaires et partagent le site avec des amis. Voyez pourquoi il pourrait être utile d'y penser?
Je pourrais m'éterniser à quel point la typographie est apparue sur le Web et jusqu'où elle doit encore aller. J'ai souvent rebondi entre le web et le design imprimé. Lorsque vous passez d'InDesign à TextMate, les limitations du type Web sont claires .
Mais beaucoup a été dit sur ce que le type Web ne peut pas faire. Cela ne va pas être un autre coup de gueule. Au lieu de cela, concentrons-nous sur 5 solutions faciles pour les regards typographiques qui abondent sur le Web.
1. Utilisez une feuille de style de réinitialisation
Stupid, mais true: Deux navigateurs n'utilisent pas les mêmes paramètres de présentation. Les différences de remplissage, les marges, les en-têtes et les indentations sont endémiques. Si vous souhaitez que votre mise en page soit plus cohérente sur tous les navigateurs, il est utile de commencer par une feuille de style Réinitialisation CSS.
Deux je recommande:
Feuille de style de réinitialisation CSS de Yahoo
Feuille de style de réinitialisation CSS d'Eric Meyer
2. Surveillez votre mesure
La mesure fait référence à la longueur d'une seule ligne de type. Une ligne plus longue = une mesure plus longue. Des études ont montré que, pour une lisibilité optimale, les colonnes de texte telles que la copie de votre corps principal doivent contenir entre 45 et 75 caractères (30 à 50 em), espaces compris . C'est l'une des raisons pour lesquelles les conceptions fluides (celles dans lesquelles les colonnes se développent et se contractent pour s'adapter à la largeur du navigateur) sont plus difficiles à voir.
De plus, votre avance devrait augmenter avec la longueur de votre mesure . Le trait principal correspond à la quantité d'espace blanc entre les lignes de texte et est contrôlé via la propriété CSS line-height. Si vous devez utiliser une mesure extra-longue, assurez-vous que votre leader s'ouvre.
De même, si vous avez une petite colonne telle qu'une barre latérale avec une mesure courte, votre interlocuteur devrait être plus étroit. Je trouve que la valeur par défaut que la plupart des navigateurs attribuent est un peu trop stricte. Une hauteur de ligne d'environ 1.4em fonctionne bien pour la plupart des contenus corporels.
3. tendre vers l'espace entre
Il ne s'agit pas seulement de votre texte, mais de l'espace qui l'entoure. Trop peu d'espace rend le texte difficile à lire, mais il en va trop. L'essentiel est de trouver un équilibre simple qui guide l'œil d'un élément à l'autre.
L'une des erreurs courantes des nouveaux concepteurs est de remplir chaque pouce d'espace. L'espace blanc fait référence à l'espace vide ou "négatif" autour de votre contenu, et il est crucial. Jetez un oeil à un magazine bien conçu comme Dwell ou Good et vous verrez que même si cela coûte de l'argent à l'éditeur pour imprimer chaque page, ils laissent une grande quantité d'espace blanc autour du texte. La page sera en équilibre et votre œil se déplacera efficacement d'un espace à l'autre.
En plus d'ajuster votre hauteur de ligne (comme mentionné dans le n ° 1), essayez d' augmenter votre rembourrage et vos marges . À moins que vous n'essayiez de tirer un tour visuel fou, il devrait toujours y avoir une bonne quantité d'espace blanc autour de votre texte. Ne le laissez pas tomber contre d'autres éléments, notamment des images. Laissez vos morceaux de contenu (titres, paragraphes, barres latérales, etc.) respirer.
Mark Boulton a écrit un article très informatif sur Espace blanc pour une liste à part, vérifiez-le.
4. Ne pas aller à la police folle
Une bonne règle de base pour tout concepteur est la suivante: n'utilisez pas plus de deux polices des visages dans votre conception. Deux polices de caractères peuvent paraître très élégantes. Une liste à part utilise des variations de Géorgie et de Verdana pour créer un look élégant et poli. Mais continuer à ajouter des polices sur votre interface crée une confusion inutile. De même, évitez d'utiliser trop de tailles de police, de couleurs ou de traitements sur une page ou dans un paragraphe, sinon ils se concurrenceront plutôt que de mettre l'accent comme prévu.
Bien que piles de polices et des technologies comme sIFR et Typeface.js vous permet de spécifier à peu près n'importe quelle police que vous voulez par défaut, résister à la tentation de se déchaîner avec la copie du corps. Polices décoratives sont mieux gardés aux manchettes, car ils affectent la lisibilité. Pensez-y - quand est-ce la dernière fois que vous avez choisi un roman de poche entièrement dans Comic Sans?
Lors de la création de piles de polices, faites attention à la taille de vos paires. Certaines polices ressemblent à des rendus de tailles très différentes. Verdana et Arial en sont un excellent exemple. Typetester est un excellent outil pour comparer les polices Web de base et créer une pile efficace. Un autre outil utile appelé Font Stack Builder vous montre quel pourcentage d'utilisateurs verra chaque variation.
Indépendamment des polices que vous décidez d'utiliser, assurez-vous qu'elles ne sont pas minuscules. Je sais que c'est dur ... le texte minuscule a l'air cool. Mais pensez aux pauvres, aux utilisateurs qui plissent les yeux! Gardez le texte du corps au-dessus de 10 ou 12 pixels. Si vous insistez sur l'adolescence, utilisez au moins un dimensionnement relatif pour tous les utilisateurs d'IE 6.0 qui, autrement, ne pourraient pas l'agrandir. Lis L'article de Wilson Miner sur les tailles de police pour une grande prise de vue sur le débat.
5) Ne négligez pas les détails
Le client a fourni le contenu. L'ajouter au site est juste une question de copier-coller, non? Faux, faux, faux. C'est un piège dans lequel les concepteurs de sites Web tombent trop souvent.
Même ceux d'entre nous qui ajoutent des balises de titre avec diligence, formulent chaque paragraphe et organisent soigneusement les listes à puces oublient certains détails typographiques importants. Beaucoup (y compris moi-même) ont manqué une formation formelle en typographie, vous ne pouvez donc pas nous en vouloir entièrement. Mais le diable est dans les détails. Son heure nous embrassons ces bases:
Utiliser des devis intelligents
Quelle est la différence entre les citations intelligentes et les citations idiotes? Les citations intelligentes (également appelées livre ou bouclé ) sont incurvées et ont à la fois un style d'ouverture et de fermeture. Les citations idiotes ( droites ) sont généralement droites. Une apostrophe est typographiquement une simple citation, donc le même problème s'applique. Une citation muette (également appelée prime ) ne doit être utilisée qu'entre les mesures. Par exemple, 6'4 "utilise des guillemets simples et doubles.
Malheureusement, nos claviers utilisent par défaut les guillemets. Microsoft Word et d’autres éditeurs de texte ne font que les corriger en écrivant. L'ajout de devis intelligents aux pages HTML nécessite plus de travail de la part du développeur Web, car vous devez utiliser le balisage pour générer des guillemets d'ouverture et de fermeture. Je vois le même problème avec les symboles em et en-dashes, ellipsis, trademark et copyright. Les codeurs prennent la solution facile en les remplaçant par des tirets, des périodes multiples, une grande MT et le tristement célèbre (C). Utiliser les bons symboles fait une différence visuelle. Faites-le bien et faites en sorte que les rédacteurs en chef sourient.
Comment faire des devis intelligents:
#8216; = ouverture d'un devis unique
’ = fermeture du devis unique
“ = ouverture du double devis
” = fermeture du double devis
Je sais - personne ne veut passer toute la journée à chercher des citations. Heureusement, des outils comme SmartyPants et Le textisme peut faire beaucoup de travail pour vous en formatant automatiquement le texte qui inclut des citations intelligentes et autres.
Lis "Le problème avec EM et EN" de A List Apart pour plus de détails sur le sujet et le codage de caractères UTF-8 pour les caractères spéciaux les plus courants.
Une mise en garde - beaucoup d'éditeurs de texte CMS (comme celui utilisé par ce site) ne vous permettront pas d'implémenter des devis intelligents sans plugins supplémentaires. Triste mais vrai.
Arrêtez de mettre deux espaces après une période. S'il vous plaît! Ce n'est pas nécessaire et c'est plutôt agaçant.
Sur vos liens, utilisez border-bottom: 1px solide au lieu de text-decoration: souligné . Les traits de soulignement peuvent passer par les caractères descendants (g, j, p, q, y), ce qui les rend difficiles à lire, en particulier lorsque vous utilisez des tailles de police plus petites.
Et bien que cela n'ait rien à voir avec la typographie, l' exécution rapide d'un correcteur orthographique n'a jamais tué personne . Même si tout ce que vous avez fait était de copier-coller, une erreur d’orthographe qui se répercute sur un site en direct a un impact négatif sur toutes les personnes impliquées.
Faites attention à ces 5 correctifs et les conceptions de votre site vont certainement s'améliorer. Rappelez-vous que ce ne sont que des points de départ. Une bonne typographie est une compétence apprise comme toute autre chose, et elle nécessite des études et de la pratique . Gardez toujours un œil sur les sites qui réussissent et notez ce qu'ils font. Besoin d'inspiration? Consultez les sites ci-dessous pour trouver des exemples de typographie Web et des exemples de publications que vous trouvez inspirants.
Type d'inspiration:
- Soustraction
- Une liste à part
- Architectes d'Information
- Jon Tangerine
- Concevoir les nouvelles
- Andy Rutledge
Écrit exclusivement pour WDD par Mindy Wagner.
Que pensez-vous de ces moyens simples pour améliorer votre typographie? Les implémentez-vous sur vos sites Web? Nous aimerions avoir de vos nouvelles!