Share
Tu sais ce que j'aime? L'Internet. Plus précisément, j'aime ce sentiment lorsque vous tombez sur l'un de ces merveilleux petits coins de beauté avec une typographie particulièrement sympathique. Aujourd'hui, nous allons présenter à la loupe 10 excellents exemples de typographie Web dans une nouvelle série mensuelle qui cherche à vous apporter une nouvelle inspiration typographique.!
Typographie Web inspirante, Une Webdesigntuts + Series Mensuelle: Tout au long de mes voyages sur le World Wide Web, j'ai pris note des exemples de sites qui m'inspirent en tant que designer. En utilisant des caractères novateurs, astucieux ou tout simplement merveilleux, ces sites m'ont aidé à approfondir mes compétences en typographie… et j'espère qu'elles vous inspireront également. Dans cette série, nous ne ferons pas que lister ces sites… nous examinerons en fait comment et pourquoi ils fonctionnent.
Sans plus tarder, je vous présente la collection de 10 exemples de typographie inspirante de ce mois-ci. Si je ne frappe pas votre favori ce mois-ci, assurez-vous de le partager ci-dessous dans la section commentaires.!
Le blog de Brian Hoff utilise un mélange de Sentinel et de Tungsten pour l’en-tête et d’autres petites en-têtes, et de FF Dagny Web Pro pour les titres du corps et des articles. La combinaison de ces deux styles de types incroyablement différents se marient très bien..
La tête a l'air à la fois fière et professionnelle, les deux excellents visages de Hoefler & Frere-Jones se complétant à merveille. La forme verticale condensée du tungstène contraste avec l'italique finement détaillé Sentinel pour produire un titre à la fois lisible et agréable à l'oeil..
Pour le corps, il ne se passe pas grand-chose, et je pense que le concepteur le souhaite. Dagny est une police de caractères merveilleuse et réaliste qui fonctionne aussi bien dans le corps de texte petit que dans les titres plus grands et audacieux. Pas grand chose à dire ici, à part que c'est un choix de police merveilleux, et que tous ceux qui le verront apprécieront certainement.
Ah oui. Aucun article de typographie approprié ne serait complet sans mentionner le remaniement de carsonified.com de Mike Kus en 2009. Le site emploie une taille considérable, Black Cooper, une fonte dont le vrai pouvoir est évident lorsqu'il est fixé à une taille aussi énorme. Vous voyez tous les détails de la police et vous avez vraiment une idée du type d'entreprise que Carsonified est.
Le reste du type sur la page est écarté, avec à peine perceptible Helvetica dans la navigation et Georgia pour la copie du corps et la plupart des titres. Je ne sais pas quelle police de caractères est utilisée pour les titres à droite de leur page d'accueil, mais je constate que ses qualités dessinées à la main contrastent joliment avec l'atmosphère de Cooper, presque une machine à écrire, comme si elles étaient deux faces du même pièce.
Vraiment, cependant, ce qui, à mon avis, lie le design de ce site, ce sont les couleurs. Chaque page a une couleur de fond unique qui fonctionne parfaitement avec le bronzage du texte. Les couleurs sont vraiment différentes d’une page à l’autre, mais elles ont toutes le même nostalgique, dynamique sensation, celle qui fonctionne avec le vert, le bleu et même l’orange vif. La beauté de la couleur du texte réside dans le fait qu'il offre un contraste suffisant avec un arrière-plan sombre et un arrière-plan très clair..
Le site de Tyler Galpin est un merveilleux mélange d'industriel, de détaillé et d'émotionnel. Il utilise un large éventail de polices uniquement pour le slogan, ce qui est généralement stupide, mais Tyler choisit les bonnes polices pour le faire fonctionner. Même s’ils paraissent si différents à l’œil nu, toutes les polices de caractères affichent un message singulier..
Sans vouloir préciser le point, je dirais que la principale caractéristique de ce site réside dans le nombre impressionnant de polices utilisées. Un instant, vous regardez un beau slif-serif, puis vous faites défiler un peu, et qu'est-ce que c'est? Un script? Ici? Il suffit de regarder combien de temps et d’efforts ont été investis pour choisir le type que vous pouvez visualiser en quelques secondes seulement..
Un autre élément important de ce site est la façon dont chaque page a été conçue sur mesure, ?? si vous voulez, sans utiliser un modèle de CMS par défaut. Chaque page est également composée avec encore plus de polices, ce qui crée une cohérence grâce au manque total de cohérence sur l'ensemble du site..
Parlons couleur. Galp.in possède l'une des palettes de couleurs les plus restreintes que j'ai vues sur le Web ces derniers temps. Simple noir sur blanc, avec des éclaboussures de jaune et de rouge pour souligner et accentuer. C'est vraiment incroyable ce qu'une seule couleur peut faire pour créer un contraste visuel saisissant entre les bonnes mains. Belle typographie, beau site web.
Le site de Jan Cavan est vraiment unique. Elle s'appuie beaucoup sur la texture et pas tellement sur le type. Alors pourquoi est-elle incluse dans cette rafle? Le type qu'elle a sur son site est choisi avec beaucoup de goût. Par exemple, le titre principal de chaque page est défini dans un script vibrant de style rétro, un choix audacieux pour un design audacieux. Ces polices "script rétro" sont toutefois délicates à utiliser sur le Web ... et cette conception évite soigneusement les clichés "à fond" avec une application restreinte.
Je ne peux vraiment pas comprendre pourquoi j'aime autant ce design, mais je pense que cela a un rapport avec la couleur, ou peut-être avec la texture? Attendez, je pense que je l'ai eu. Tous les éléments du design se marient parfaitement et aucun domaine ne reçoit plus d'attention qu'un autre.
Il y a aussi beaucoup de choses subtiles qui se passent ici. Les titres d'articles de blog sont en majuscules, une décision qui va bien avec le serif chic qu'elle choisit pour les insérer. Toutes ces petites choses dans la conception de Jan contribuent à l'ambiance rétro que la page publie.
"Le studio de Nathan Strandberg & Katie Kirk." Le nom du jeu ici est la subtilité, et ce site Web merveilleux ne déçoit pas. Du beau type aux couleurs vives, visiter eighthourday.com est vraiment une expérience. Toutes les polices de caractères sont choisies avec goût, avec un en-tête dans un agréable sans-serif et un sous-titre de script. Tout le texte est équilibré; rien ne réclame votre attention. C'est vraiment un site accueillant.
Comme je l'ai mentionné, la couleur joue un rôle important dans la typographie, ainsi que dans le design dans son ensemble. Ce joli rouge-orange est utilisé partout, accompagné d'autres couleurs douces. Sur ce site, il semble que le type et la couleur soient intrinsèquement tissés ensemble. Le type ne fonctionnerait pas sans la couleur, et vice versa.
Il n'y a rien de spécial à propos des caractères par eux-mêmes. Bien sûr, ils seraient toujours aussi beaux, mais pas aussi parfaits qu’ils le sont maintenant. Cela rend ce site particulièrement amusant à examiner afin de découvrir comment le type et la couleur interagissent les uns avec les autres..
Un excellent site Web pour une grande cause par Matthew Smith. Ce que j'aime dans ce site, c'est l'attention portée aux détails. Regardez ces italiques subtiles dans les titres. Belle. J'admire son utilisation de Georgia pour les titres. Il est normalement utilisé pour le corps du texte, mais sa taille correspond à celle de l'en-tête. des détails magnifiques de la police de caractères séculaire.
Notez la façon dont la lumière brille au-dessus du texte dans l'en-tête. Ce sont ces petites choses qui rendent un design génial.
Georgia est également utilisé pour ces ravissants boutons, avec cette combinaison de majuscules et de petites italiques. Cette conception montre vraiment la flexibilité d'une police, et j'adore ça.
Je tiens également à mentionner que presque tout le texte de la page est du texte réel, incorporé via @ font-face, aussi chapeau à Mike Meyer pour ça..
Une autre création de Mike Kus, celle-ci comportant une typographie tout à fait unique. Étant donné que la plupart d'entre elles sont basées sur des images, je ne peux pas dire quelle police est utilisée dans cette conception, mais je peux dire qu'elle représente très bien l'image que Twitter émet en tant qu'entreprise; c'est amusant, léger et un peu idiot.
En ce qui concerne les couleurs, vous avez le bleu Twitter bien connu sur l’ensemble du site, et le tout fonctionne à merveille. Il y a aussi un très beau rouge utilisé pour les embellissements et les capteurs d’attention qui coexiste très paisiblement à travers les pages du site..
Ce qui est étonnant pour moi ici, c'est que même si la société n’était pas mentionnée à chaque tournant, vous pouviez toujours dire qu’il s’agissait d’un site Twitter. Il projette leur marque unique à tous les niveaux, avec le type, la couleur, l’illustration et même la texture. Quel joli petit site.
Slab-serif, sans-serif, serif, ce site utilise toutes sortes de types et les utilise bien. C'est un bon choix de laisser les empreintes pour les titres les plus gros, ce qui laisse les gros problèmes, si vous voulez, à l'italique Times New Roman, une police de caractères normalement utilisée dans la conception Web, mais qui fonctionne correctement si elle est utilisée correctement..
La copie du corps minuscule est laissée à Tahoma, un autre choix audacieux qui fonctionne bien dans une petite taille. Vous remarquez à peine que c'est même là, et je suis sûr que c'est ainsi que le concepteur le voulait.
Encore une fois, je ne suis pas sûr de ce qui est utilisé pour les gros titres, bien que je mette probablement mon argent sur Rockwell, un choix vraiment solide.
Sur le plan des couleurs, cette conception utilise un schéma de lumière sur l'obscurité rarement utilisé qui ne fonctionne pas avec des corps de texte plus longs, mais pour un site lourd en images comme celui-ci, je pense que cela fonctionne très très bien. Comme d'habitude, une autre couleur est utilisée pour mettre l'accent, et dans cette situation, cette couleur est un orange agréable et riche. C'est un choix très chic, et je respecte beaucoup la décision.
Pour une collection de mousseux awesomeness, ?? par le duo dynamique Jina Bolton et Meagan Fisher, le mot qui me vient à l’esprit est chic. Tout le type est très lisible, et mis dans des couleurs qui complètent bien les images délicieuses du site. En regardant ce site, je suis frappé par la qualité des détails de ce dessin, du type joliment réglé aux couleurs inspirées du café..
Je suis à peu près sûr que le logo et les sous-titres sont en Archer, une plaque simple et lisible de Hoefler & Frere-Jones. Encore une fois, cela, associé à la Géorgie, fait un classe, lisible expérience.
Une autre chose que j'adore dans ce site, ce sont les couleurs. Comme il s’agit bien évidemment d’un site sur le thème du café, les couleurs ne sont pas seulement harmonieuses, mais aussi belles. Certes, l'effet est probablement renforcé compte tenu du nombre d'images couleur café sur le site..
Globalement, un site totalement génial de personnes totalement géniales.
"Beau design et développement," lit Iron to Iron, et c'est beau. La conception entière se sent fier et en quelque sorte royal, comme si elle était finement travaillée par le designer de la cour.
Type-sage, cette conception est simple charmant. Ce texte condensé et obscurci est un génie. Vous ne pouvez pas réellement le lire, mais cela ne vous oblige pas à essayer. Ce sont ces types de détails et de fioritures qui rendent ce site magnifique. À titre d'exemple, la forme en forme de diagramme de Venn à l'arrière-plan de l'en-tête n'a pas de raison pratique, mais elle a fière allure et ajoute une autre dimension à cette conception.
Les paragraphes du corps sont placés dans Georgia, une ville qui ne manque pas de sens, et je pense que cela leur est très utile, en particulier si vous considérez ce large sans qu'ils soient en dessous.
La transparence des couleurs est utilisée à bon escient, la plupart des couleurs étant simplement des niveaux variables du même bronzage et du même bleu-vert.
Quelle merveilleuse façon de mettre fin à cette petite collection de beaux sites Web.
Eh bien, c'est encore l'heure du poste. Nous avons eu des éclats de rire, des cris, mais ensemble, nous sommes parvenus à la conclusion et je dois vous quitter. Comme je l'ai mentionné ci-dessus, si je n'ai pas frappé votre préféré ce mois-ci, assurez-vous de le partager ci-dessous dans la section commentaires! Je vais être sûr de vérifier pour le post le mois prochain!
Pour en savoir plus sur la typographie Web, consultez mon article sur Choisir la bonne police: Guide pratique de la typographie sur le Web.!
Accentsconagua