Construire une base typographique avec les feuilles de style

Jason Tselentis dans Apprentissage le 31 mars 2015

Ces dernières années, l'axiome "mobile first" a incité les concepteurs à se mettre en ligne et à atteindre leur public en envisageant d'abord la manière dont le site et l'expérience prendront forme sur les appareils mobiles. Au départ, cela signifiait concevoir pour le petit écran d'un téléphone, mais au fil du temps, les e-readers et les tablettes sont devenus plus répandus que les ordinateurs portables et de bureau, nécessitant des solutions pour une gamme de tailles d'écran. Et concevoir pour ces écrans multiples signifie s'assurer que la typographie fonctionne. Aujourd'hui, la priorité au mobile est devenue une seconde nature, mais pour s'assurer que la conception fonctionne bien sur les écrans de petite, moyenne et grande taille, il faut penser "typographie d'abord". Il existe toute une gamme d'outils pour créer des feuilles de style typographiques, notamment des éditeurs de texte, des éditeurs markdown, des programmes de mise en page et des applications web telles que Typecast™de Monotype.

L'affichage simultané de tous les styles de caractères, du plus grand au plus petit, vous permet de comparer les styles et d'expérimenter des permutations afin de voir la hiérarchie et la lisibilité, tout en voyant comment la typographie se compare à l'identité de votre marque existante et à toute manipulation typographique utilisée pour son aspect et sa convivialité.

Du backend au frontend

Avant de mettre en page un site web, l'examen des feuilles de style typographiques vous aidera à dimensionner les choses à l'aide d'une méthodologie de type first. Vous pouvez voir votre titre 1 à vos légendes, ainsi que les titres mineurs et le corps du texte, et finalement porter votre typographie sur desktop et sur un navigateur mobile pour vous assurer que tout fonctionne sur tous les appareils. Les développeurs web utilisent généralement un éditeur de texte pour saisir les styles CSS et composer leur contenu textuel en HTML dans le backend. Il existe de nombreux éditeurs de texte permettant de taper CSS et HTML à la main, certains d'entre eux offrant un aperçu de l'aspect final de la typographie et de la mise en page dans la partie frontale.

La saisie manuelle de cette feuille de style de base dans un éditeur de texte comprenait la création d'un nouveau fichier, l'établissement des titres CSS et des familles police, la mise à l'échelle de la taille police, ainsi que la saisie des titres HTML 1 à 6 (à droite) pour voir comment la typographie se présente et se ressent.

Les éditeurs Markdown vous permettent de saisir votre contenu, de baliser des lignes de texte ou des corps de texte avec des éléments hiérarchiques tels que des titres, et d'exporter le texte au format HTML. De gauche à droite : texte markdown prévisualisé dans l'éditeur, exporté au format HTML, et les titres tels qu'ils apparaissent dans un navigateur web.

Les éditeurs Markdown offrent une interface simple affichant du texte brut, et nombre d'entre eux vous permettent d'exporter votre contenu au format HTML. Markdown n'est pas destiné à remplacer HTML ou CSS, mais constitue plutôt un point de départ pour ceux qui souhaitent une approche plus simple de la saisie et de l'affichage de leur contenu, puis de sa conversion dans un format web tel que XHTML ou HTML. Les éditeurs Markdown offrent un moyen simple de travailler avec du texte, où vous marquez ou étiquetez des styles, tels que les titres principaux, les titres secondaires, le corps du texte et les guillemets. À l'écran, le texte apparaît toujours de la même manière, avec les balises visibles que vous avez attribuées à vos styles, comme "#" devant le texte destiné à être le titre 1 et "##" pour le titre 2. Ce n'est qu'une fois le texte exporté au format HTML que vous pouvez voir ce qu'il donnera dans un navigateur web. Souvent, vous devrez créer le CSS dans un fichier séparé afin de spécifier la taille des caractères, les familles et les couleurs.

Un exemple de CSS provenant du site web personnel de l'auteur, créé à l'aide d'un éditeur de texte de base. Pour la mise en page du site, la famille de caractères Helvetica® est utilisée en premier, puis, si elle n'est pas disponible, la famille Neue Helvetica® est chargée, et ainsi de suite jusqu'à la famille de caractères Arial® et l'empattement par défaut du navigateur.

Le CSS, appliqué à quelques lignes de HTML, est prévisualisé dans un navigateur.

Éditeurs WYSIWYG

Bien que de nombreux concepteurs et développeurs aient pris l'habitude d'utiliser des éditeurs de texte, le temps est vraiment un facteur essentiel, et tout ce qui peut être fait pour réduire la production et le développement vous aidera, vous et votre équipe, à penser d'abord à la typographie et à publier vos conceptions rapidement et facilement. Les traitements de texte et les programmes de mise en page qui fonctionnent sur les ordinateurs de bureau, les tablettes et même les smartphones sont conçus pour offrir aux concepteurs une expérience de mise en page WYSIWYG (what you see is what you get), qui vous montre à quoi ressemblera votre conception, tout en fournissant le HTML et le CSS nécessaires pour que le site fonctionne dans un navigateur.

Les traitements de texte et les programmes de mise en page vous permettent de saisir votre contenu, d'appliquer des styles, puis d'exporter le document vers des fichiers XHTML, HTML, XML et CSS pour personnaliser et spécifier le site Web Polices à partir d'une variété de sources.

De nombreux programmes WYSIWYG vous permettent de modifier facilement la taille, la graisse et le style de votre typographie, ainsi que sa couleur et sa couleur d'arrière-plan. L'application Typecast de Monotype est l'un de ces outils WYSIWYG, destiné à donner aux concepteurs un aperçu immédiat de la typographie et de la mise en page dans un site app facile à utiliser et fonctionnant dans un navigateur web.

La création d'un compte gratuit sur Typecast.com vous permet de concevoir des titres, un corps de texte et une citation en moins de deux minutes, avec en prime la possibilité de voir comment le site Web Polices , provenant d'une grande variété de sources, fonctionne dans votre mise en page.

Vous pouvez créer votre base typographique avec une famille de caractères ou une combinaison de deux ou plusieurs, et les éditeurs WYSIWYG tels que Typecast app vous aident à faire le travail plus rapidement et plus facilement qu'en tapant votre HTML et CSS une ligne à la fois dans un éditeur de texte. Par convention, les concepteurs de sites web ont commencé par utiliser des polices de caractères Web-safe polices, telles que les familles Arial®, Georgia® ou Verdana®. Ces polices et d'autres polices sont installées sur la plupart des systèmes d'exploitation, ce qui leur vaut l'appellation alternative de "système polices". Il est toutefois important de noter que l'utilisation du système polices au cours du développement préliminaire, lorsque vous prévoyez les possibilités de votre feuille de style typographique, ne signifie pas que vous devez utiliser uniquement le système polices dans votre conception finale, ce qui diluerait l'efficacité d'un site. Le système polices est conçu comme un squelette sur lequel vous pouvez vous appuyer, en utilisant éventuellement le site Web Polices pour personnaliser votre typographie et donner à votre site une voix unique.

Vous pouvez donner du caractère à votre site et aller au-delà du système polices en choisissant parmi une multitude de polices dans Typecast de Monotype app de Polices.com, ou d'autres fournisseurs Web Police .

Pour prévisualiser la famille de caractères Demos Next® à partir de Polices.com, il suffit de mettre en évidence le titre 1 dans Typecast et de le sélectionner dans un menu déroulant.

Vous pouvez faire évoluer le système polices utilisé dans votre mise en page avec Web Polices en utilisant une mise en page côte à côte pour comparer et contraster les deux. Vous pouvez choisir parmi une grande variété de fournisseurs et de polices afin de donner à votre site un aspect et une sensation qui correspondent à votre identité de marque existante, et effectuer des tests afin de trouver la meilleure solution pour votre solution de repli police.

Dans cette mise en page Typecast côte à côte, la police de caractères Trade Gothic® p.second-intro surlignée en bleu à droite peut être rapidement et facilement comparée à l'Arial police à gauche. Dans ce cas, l'Arial serait un bon choix de repli pour le Trade Gothic, puisque les deux ont des sauts de ligne identiques.

Typecast produit un guide de style complet comprenant les polices utilisés, leurs fournisseurs, ainsi que les styles CSS.

Lorsque votre typographie a été établie, testée et finalisée, utilisez Typecast pour afficher votre guide de style qui indique les polices que vous utiliserez, leurs fournisseurs, votre palette de couleurs, ainsi que les styles et les propriétés CSS. Si vous avez choisi d'utiliser un éditeur de texte, un éditeur markdown, un traitement de texte ou un programme de mise en page, vous voudrez exporter votre mise en page au format HTML et vos styles au format CSS pour les prévisualiser et les tester dans un navigateur. Votre typographie étant spécifiée et prête pour le web, vous disposez maintenant des atouts nécessaires pour commencer à développer le reste du type de votre site.

Jason Tselentis est concepteur, écrivain et éducateur. Professeur associé au département de design de l'université Winthrop, il enseigne la communication visuelle, la stratégie et le développement de marques, la conception de sites web et la typographie. Ses écrits sur la conception et la culture visuelle ont été publiés dans les magazines Arcade, Eye, mental_floss, Open Manifesto, Print et HOW. M. Tselentis a également publié quatre livres sur le design, la typographie et l'histoire du design.