30 des meilleures ressources de typographie Web en ligne
Il semble qu'il y ait deux camps parmi les concepteurs de sites Web: ceux qui adoptent la typographie Web , l'expérimentent et essayent de nouvelles choses dans pratiquement tous leurs modèles; et ceux qui l’évitent comme la peste, optant pour des piles de polices standard, sans danger pour le Web.
Il semble aussi que beaucoup de designers qui appartiennent au deuxième groupe souhaitent qu’ils ressemblent davantage au premier.
Les ressources ci-dessous peuvent vous aider à améliorer votre typographie Web, quel que soit votre camp.
Il existe des outils pour créer une typographie, des références et des articles uniques qui peuvent vous apprendre des principes typographiques, ainsi que beaucoup d'inspiration et de nouvelles pour vous tenir au courant de l'état de la typographie Web.
Outils de typographie
Typetester
Typetester vous permet de comparer jusqu'à trois polices, côte à côte, avec le texte de votre choix. Vous pouvez spécifier la taille de la police de base, la police, la taille, le titre, le suivi, l’alignement, l’espacement des mots, la décoration, la couleur et la couleur de l’arrière-plan pour obtenir une image très précise Ensuite, lorsque vous avez tout ce que vous voulez, vous pouvez récupérer le CSS.
HTML Ipsum
HTML-Ipsum est un générateur de lorem ipsum spécifiquement conçu pour la conception de sites Web. Au lieu de simplement vous donner des morceaux de texte, HTML-Ipsum peut vous donner un texte pré-formaté comme des paragraphes, des listes ordonnées, des tableaux vides, des formulaires et des listes de navigation. Un texte pré-formaté comme celui-ci est un excellent moyen de gagner du temps lors de la création de maquettes de sites Web et de conceptions initiales.
Typechart
Typechart vous permet de parcourir les polices Web pré-formatées et de les afficher telles qu'elles apparaissent sur un PC Windows et un Mac. Vous pouvez trier les polices incluses en fonction de leur taille, de leur caractère et de leur accentuation.
WP-Typographie
WP-Typography est un plugin WordPress qui rend votre typographie WP standard plus attrayante. Il prend en charge la césure, le contrôle de l'espacement, le remplacement intelligent des caractères (y compris les guillemets, les tirets, les ellipses et les symboles mathématiques) et les crochets CSS pour styliser des éléments spécifiques (esperluettes, acronymes et nombres).
Type de CSS défini
CSS Type Set vous permet de définir un bloc de texte, puis de copier le CSS. C'est un générateur CSS simple qui est idéal pour styler une police à la fois. Il vous permet de contrôler la police, la taille, l’espacement, l’intérieur, la décoration et la couleur.
Retournement typique
Flipping Typical affiche un exemple de texte dans une variété de polices installées sur votre ordinateur. C'est un excellent moyen de comparer plusieurs polices, côte à côte, en une seule fois. La seule mise en garde: seules certaines des polices présentées sont sécurisées pour le Web.
Grille Typographique
Un rythme vertical établi est l'une des choses qui distinguent la grande typographie de la bonne typographie. La grille typographique vous aide à établir ce rythme vertical. Il comprend également une grille verticale servant de guide pour positionner la typographie et d’autres éléments.
WhatTheFont
WhatTheFont fournit un moyen facile de découvrir ce qu'est une police particulière. Il vous suffit de télécharger une image (ou de spécifier une URL) et WhatTheFont déterminera la police utilisée. C'est un excellent moyen de trouver des polices qui ont été utilisées dans des images ou des fichiers Flash.
CSS avec rythme vertical
Comme déjà mentionné, un rythme vertical cohérent distingue la grande typographie de celle qui est seulement "bonne". Cet outil peut vous aider à créer des CSS pour la typographie qui a un rythme vertical cohérent. Entrez simplement la famille de police, la taille de la police de base, la hauteur de la ligne de base et la taille de la police cible, puis calculez-la pour obtenir un CSS pour un rythme vertical cohérent.
Calculateur de rythme baseline
Un autre excellent calculateur de rythme vertical. Celui-ci, cependant, vous montrera à quoi ressemblent les différentes tailles de polices les unes par rapport aux autres lorsqu’il est configuré selon votre rythme vertical établi. C'est un excellent moyen de vous assurer que toutes les tailles de police que vous utilisez auront l'air correctes.
Graveur de polices
Font Burner vous permet d'intégrer des polices sur vos sites Web à l'aide de sIFR, à l'aide d'une interface graphique. Il existe actuellement plus de 1000 polices disponibles via Font Burner, et un plugin WordPress est également disponible. Tout ce que vous avez à faire pour l'utiliser est de trouver la police que vous souhaitez utiliser, de copier le code incorporé, puis de le coller dans le code de votre site Web.
Générateur de texte aveugle
Ce générateur de texte factice vous permet de créer non seulement lorem ipsum, mais aussi plusieurs autres types de texte factice. Dans le même temps, vous pouvez également formater ce texte directement dans le générateur (cliquez sur Options avancées), puis copiez le fichier CSS.
Ligne de base
Baseline est un framework de grille et de typographie qui inclut des fichiers pour réinitialiser les paramètres par défaut du navigateur et créer une disposition typographique de base. C'est une bonne option pour les concepteurs qui souhaitent utiliser une disposition en grille et qui souhaitent également de l'aide pour concevoir la typographie du site. La configuration de la typographie comprend des titres, des listes, des paragraphes, des citations et des tableaux, ainsi que d'autres codes de balisage.
Matrice de polices
Font Matrix affiche les polices incluses dans les systèmes d’exploitation Mac et Windows, Microsoft Office et Adobe Creative Suite, le tout dans une grille qui permet de voir facilement les polices les plus susceptibles d’être trouvées sur les types d’ordinateurs. Par exemple, si votre site s'adresse principalement aux concepteurs, vous pouvez utiliser la première police de votre police font avec Adobe Creative Suite, alors que si le site est destiné aux utilisateurs professionnels, la première police incluse peut provenir de Microsoft Office.
Typographe
Typograph vous permet d'expérimenter différentes échelles et d'autres éléments de rythme vertical. Il comprend une variété d'échelles traditionnelles (y compris Le Corbusier et Fibonacci), ainsi que d'autres options de mise en page.
Services de polices Web
Typekit
Typekit propose des polices de divers vendeurs et fonderies, notamment The League of Movable Type, FontFont et Veer (vous pouvez afficher la liste complète des polices sans avoir à vous inscrire pour un compte). Ils offrent également des options de contrôle avancées pour styliser vos polices, une évolutivité infinie et un colophon qui indique à vos visiteurs les polices utilisées par votre site. Le prix de Typekit est raisonnable, allant de gratuit pour un accès partiel à 100 $ / an pour les sites à fort trafic.
Kernest
Kernest est un service de polices Web qui utilise les polices OFL, GPL, GUST et Creative Commons, ainsi que celles avec des licences commerciales. Bon nombre de leurs polices sont gratuites (le service est gratuit), tandis que d’autres ont des frais d’abonnement de quelques dollars.
Polices en direct de Ascender
Ascender propose son propre service de polices Web, Fonts Live. Ils disposent de plus de 110 polices de caractères, avec des polices Monotype, Microsoft, Bigelow & Holmes, etc., ainsi que leurs propres polices.
API de police Google
Google propose une sélection limitée de polices Web open source. Bien que la sélection ne soit pas importante, elle est gratuite et soutenue par Google, ce qui signifie qu’il est peu probable que vous rencontriez des problèmes de capacité ou de retard.
TypeFront
TypeFont aborde les polices Web un peu différemment. Plutôt que d'offrir une bibliothèque de polices conviviales pour le Web, elles vous permettent de télécharger vos propres polices portant une licence Web. C'est une excellente option si les polices que vous souhaitez utiliser ne sont actuellement proposées par aucun des autres services de polices Web. Il existe un plan gratuit pour les sites à faible trafic, ainsi que des forfaits payants.
Typotheque Web Fonts
Typotheque propose son propre service de polices Web pour rendre ses polices disponibles pour les implémentations @ font-face. L'avantage est qu'il n'y a qu'un coût de licence unique pouvant couvrir à la fois les applications imprimées et Web. L'inconvénient est que la sélection se limite à leurs polices.
Ressources typographiques et articles
Les éléments de style typographique appliqués au Web
Ceci est un guide de référence très complet pour quiconque veut apprendre non seulement les bases de la bonne typographie Web, mais aussi des techniques et des principes plus avancés. Il est divisé en chapitres et sous-chapitres, y compris les mouvements horizontaux et verticaux, les blocs et paragraphes, la pagination, la taille et bien plus encore. C'est un travail en cours, alors attendez-vous à plus d'informations à paraître dans le futur.
Nice Web Type
Nice Web Type a des tonnes d'informations sur la mise en œuvre de la typographie Web. Ils ont des «notes» sur tout, de la prise en main de la typographie Web à l’utilisation de CSS @ font-face. Ils discutent aussi régulièrement des tendances et des nouvelles idées et ont une page consacrée à ce qu’ils considèrent comme les meilleures polices disponibles.
12 exemples de typographie de paragraphe
Cette collection d'échantillons de paragraphes de Jon Tan est un excellent point de départ pour quiconque conçoit un site comportant beaucoup de texte. De nombreux concepteurs négligent toutes les possibilités offertes par le style de paragraphe et optent pour des options plus traditionnelles et conservatrices. Cet article prouve qu'il n'est pas difficile de sortir de la boîte et de faire quelque chose d'intéressant avec les paragraphes de vos conceptions.
Contraste et flux typographiques
Ceci est un guide fantastique de WebDesignerWall sur les principes de flux et de contraste dans la typographie Web. Il décompose ces principes en plusieurs sections, notamment la taille, la police / classification, la couleur et le poids.
Pile de polices révisée
Cet article explique comment développer les piles de polices CSS Web sécurisées en explorant d'autres polices couramment installées. Il explore également les piles de polices de certains sites Web populaires, ainsi que des recommandations sur la manière dont elles pourraient améliorer leurs piles.
Sur la typographie Web
Cet article de Jason Santa Maria sur A List Apart est un aperçu très complet des paires de caractères dans les conceptions de vos sites Web. C'est un sujet qui n'est pas discuté très souvent mais qui est primordial pour créer de grands designs typographiques sur le web.
Penser avec le type
Thinking with Type est le site Web compagnon du livre du même titre d'Ellen Lupton. Il offre de nombreuses informations de base sur la typographie. Bien que la plupart de ces informations soient axées sur la typographie imprimée, de nombreuses informations peuvent être appliquées à la typographie Web.
10 astuces pour améliorer votre typographie Web
Une liste de dix choses simples que vous pouvez faire pour améliorer la typographie de vos conceptions de sites Web. Il comprend des informations sur la police, la taille, l’échelle et la hiérarchie, ainsi que sur d’autres éléments.
Typographie Inspiration, Tendances & Actualités
Typophile
Typophile est un forum pour les passionnés de typographie et les typographes. Si vous voulez savoir ce qui se passe dans le monde de la typographie, Typophile est un endroit idéal pour regarder. C'est aussi un bon endroit pour obtenir de l'aide pour tout problème lié à la typographie.
J'aime la typographie
ILT est un blog entièrement consacré à la typographie. Il aborde à la fois le design et les sujets d’affaires, du point de vue professionnel. Leurs archives sont énormes, il y a donc beaucoup d'informations sur l'actualité et les tendances actuelles et passées pour vous occuper.
nous aimons la typographie
WLT est une galerie de typographie, de lettrage, de signalisation et d’autres types. Les utilisateurs peuvent soumettre des images du type qu'ils aiment et c'est un endroit idéal pour trouver l'inspiration typographique pour votre prochain projet.
Typographie pour les manchettes
Elements of Design a une grande galerie de plus de 120 exemples de typographie. Ils vont de la plus simple à la plus complexe, dans une variété de styles et de caractères. C'est un excellent endroit où aller si vous cherchez un peu d'inspiration. Ils ont aussi une galerie de tirer des citations avec plus de 20 exemples.
Typographica
Typographica propose des critiques de type, des commentaires et des critiques de livres de typographie. Leurs critiques de type sont particulièrement instructives si vous cherchez à savoir ce qui fait une bonne police de caractères.
Dans les coulisses de la typographie Web exquise
C'est en fait le premier d'une série en cinq parties. Cet article examine la typographie derrière A List Apart, en décomposant les polices et les styles utilisés pour différentes parties du site. Les articles suivants regardent: Jesús Rodríguez Velasco , Jon Tan , Designr.it , et Le Codex Transportica .
Typites
Typesites est un blog qui présente régulièrement de grands designs de typographie Web. Les sites qu'ils présentent sont diversifiés, mais tous incluent l'inspiration de type.
Compilé exclusivement pour Webdesigner Depot par Cameron Chapman