Google fonts : tests de lisibilité | All For Design Avant d’utiliser les polices proposées par Google dans le Google font directory, j’ai décidé de les tester une par une, sur OS-X et sur Windows afin d’évaluer leur lisibilité. Cet article propose un récapitulatif des résultats sous forme de pdf téléchargeable gratuitement (Français/Anglais) ainsi qu’une analyse détaillée… Webdesign et typographie 2010 aura incontestablement été l’année de la typographie sur le web. Le nombre de services dédiés (ou non d’ailleurs) à l’usage de polices sur le web (via @font-face) a explosé ces derniers mois (Typekit, FontDeck, Typotheque, FontsLive, Fontspring, TypeFront, Fonts.com, Ascender fonts, Kernest, Webink etc.) c’est un véritable raz-de marée d’outils au service du travail typographique sur le web. Dans ce que je peux comprendre du travail typographique d’un webdesigner, la base d’un caractère de labeur c’est avant tout d’être lisible sur plusieurs résolutions, systèmes d’exploitation, dans différents corps de texte etc. Evaluation de la lisibilité
Les codes de la Typographie #1 - Structure et vocabulaire de la lettre - typographie Pour ce mois d'avril, nous allons réaliser un dossier complet sur la Typographie. Essentiel dans la réalisation d'un logo ou d'un slogan elle peut véhiculer des messages puissants et différents selon ses formes. Dans ce premier numéro nous allons compre Définitions : Caractère : Désigne une lettre. 1 - Capitale : Appellé grossièrement Majuscule, il existe deux type de capitales : Les grandes ( 1a ) utilisées en début de phrase et les petites ( 1b ) avec la hauteur et la graisse des minuscules. 2- Minuscule ou Bas de case : Lettre de hauteur moyenne, pouvant posséder des parties scendantes et descendantes. 3 - Barre ou traverse : Partie horizontale des lettres 4 - Diagonale ou branche : Représente les parties obliques d'une lettre 5 - Ligne de base ou ligne de pied : Ligne sur laquelle les lettres sont alignées 6 - Hauteur du X ou hauteur courante : Hauteur des lettres bas de case ne contenant aucune ascendante et descendante. 11 - Empattement : Cela représente le pied du Fut ( Montant ).
Best of Design 2010 As 2010 is wrapping up, it is about time do a sum up of the best sites that I've featured on Best Web Gallery. Again I've selected 50 sites from different categories: personal blog, commercial, agency, portfolio, and software. In 2010, CSS design is getting more interactive. People are using jQuery and CSS animation to add interaction in their design. More designers are using custom font faces. 20 Things I Learned Jax Sven Prim Future of Web Design Stephen Caver Version Teixido Pictory Riot Industries Brizk The Many Faces of Tobias Ahlin Haus Nike Snowboarding Living Principles Forever Heavy Christoph Zillgens Foundation Six Cargo Collective Mobile Roadie Donq 37 Signals Courier Rainy Pixels Simo Analog Veerle Kaleidoscope Joyent Hicksdesign Marie Catribs dConstruct Buffalo Galp Lost World's Fairs Fiell Image Mechanics Infinvision Grand People Crush Lovely Rokkan Cutler Yaron Schoen Cloud 365 Chirp Colly Mercy
La Typographie #4 Place à l'animation et au Motion Design ! - typographie Voici le 4eme numéro de notre dossier sur la typographie, on commence à avoir vu en grande partie ce qui compose une police. Mais il nous reste maintenant à s'intéresser à son utilisation en animation, dans des clips, teasers, etc. On sait que la typographie fait partie intégrante de tout projet créatif qu'il soit un logotype, une affiche, un visuel, un site internet mais également une vidéo ou une animation. Dans cette article nous allons essayer de faire un tour rapide sur son utilisation dans les teasers, clips musicaux, sur les sites web, mais également dans des livres ! En quelques mots je dirais que c'est l'art de créer une animation, avec comme seul élément principal "la typographie", ensuite c'est un jeu de mouvements, de compositions et de constructions avec les caractères. La déclaration des droits de l’homme Intelligent Design Petite animation bien réalisée qui explique comment créer un design réfléchi et qui fonctionne, réalisé par Chrisitian Bramsiepe. Hocus pocus - Hip hop
Responsive webdesign avangtages et bonnes pratiques Ce n'est un secret pour personne, la navigation mobile sur internet fera mordre la poussière au traffic de bureau classique -plus tôt que vous le pensez. Aux États-Unis, il représente déjà 20% du web global. En Asie et en Afrique, plus de la moitié de tout le traffic provient du mobile. En plus de cela, il y a des milliers et des milliers des millards d'appareils qui peuvent être utilisés pour accéder au web. Concevoir des sites adaptatifs qui fonctionnent correctement dans ce nouvel écosystème est un vrai nouveau défi. Le design adaptatif (aka responsive webdesign), défini par Ethan Marcotte, explique comment construire un site fluide, qui peut se rétrécir ou s'agrandir, pour s'adapter à toute taille d'écran sur n'importe quel appareil. Avec une grille fluide, des images flexibles et des media queries, nous n'avons pas à concevoir, un site mobile dédié séparé. Les avantages d'une conception adaptative Il y a de nombreux avantages au design adaptatif. Prototypes et itérations rapides
Guide to CSS Font Stacks: Techniques and Resources - Smashing Magazine Advertisement CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you’re missing out on some great typography options. Creating Your Own Font Stacks There are a huge variety of font stacks recommended. First of all, make sure you always include a generic font family at the end of your font stacks. Third, make sure you pay attention to the scale of the fonts in your stack. Common Font Stacks A lot of designers out there have taken a crack at creating ideal font stacks. Better CSS Font Stacks Unit Interactive published an article last summer with a collection of “better” CSS font stacks. Here are some listed for body text: For headlines: Georgia, Times, ‘Times New Roman’, serifPalatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times, ‘Times New Roman’, serifTahoma, Verdana, GenevaTrebuchet, Tahoma, Arial, sans-serif
Free Fonts, Best for Posters, Flyers and Logo Designs | Fonts This is the another excellent fonts collection for graphic designers. These fonts are best for posters, flyers and logo designing. Custom designed fonts are a great solution for making your company stand out from the competition. We are understand the requirement of market and gathered best and unique fonts and typefaces for you. You may also like: Recieve our RSS updates via email, simply enter your email address & click subscribe. Typography is one of the most important aspect in modern web designing. This is not the traditional big list with all the available free fonts on the internet but it’s an refined collection of best handpicked fonts for designers. Free Font: Eclectic Download Font Graham Hand Download Font Agilis Download Font Brushy Download Font Genplan Free Typeface Download Font Versa Download Font Bamq Typeface Download Font Mecca Download Font Hiruko Pro (Pay with Tweet) Download Font Aleo free font Download Font Prida61 Download Font Muro Download Font Brasilcao Download Font Moondance Archistico
Team Fannypack Les codes de la Typographie #2 Histoire et Familles - typographie Voici le deuxième volume de notre dossier sur "La Typographie", après avoir vu "La structure et le vocabulaire de la lettre" dans le premier numéro, aujourd'hui nous allons nous intéresser à son histoire et son évolution. Le terme "typographie" est arrivé avec la naissance de l'imprimerie vers 1440, avec la technique d'impression. On disposait des caractères mobiles (en plomb) pour former des mots et des phrases. Celui-ci à fait connaitre un essor à la typographie, la création et l'utilisation de celle-ci se fait beaucoup plus facilement. La typographie nous aide en tant que graphiste à connoter et donner des valeurs à nos projets quels qu'ils soient, elle fait partie intégrante de notre métier. Afin de mieux appréhender la richesse offerte par les différents caractères, des typographes ont tenté de regrouper les caractères présentant des caractéristiques graphiques similaires en familles. Les Humanes (Vénitiennes Old Style) Les Garaldes Les Réales Les Didones Les Mécanes (Égyptienne)
Style Tiles: The Flip Side of Wireframes Style Tiles: The Flip Side of Wireframes Style Tiles provide a fresh and productive way to approach the design process. They allow you to specifically hone in and focus on a project’s personality and mood without worrying about specific layout decisions. Today we’re going to show you exactly what Style Tiles are, why you should use them and how to incorporate them into your design process. What Are Style Tiles? Style Tiles are a way to develop a site’s visual identity independent of the complicated logistics that come into play when actually trying to develop a full fledged mockup. Rather than beating around the bush, let’s jump right into what a Style Tile looks like. If you’re driven by visual design, then you should immediately be able to see the usefulness of this tool. The Flip Side of Wireframes The Style Tiles website describes them as a something in between a mood board, which is too vague, and a full mockup, which is too precise. Three Reasons To Use Style Tiles Let’s Make One Logo
Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.
10 Excellent New Free Fonts Here at WDL, we know how important it is for our readers to have as many good resources as possible in their design library. That’s why we do our best to gather what is new out there and deliver it to you. So today we have a new round of free fonts to give you plenty of typography options for your upcoming designs. Enjoy! Nexa Maven Pro Corki Mission Script Balls Family Bouwen Pixa Type Family Frontage NeoDeco Signika About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 892 shares 10 Best New Free Fonts We’ve been on the prowl for some new free fonts to share with you. Read More 1136 shares 9 Free & Useful Fonts for your Designs Whether it’s PSD’s or icons, we love finding high quality free files and sharing them with our readers.
Using the WebFont Loader to Make Browsers Behave the Same Web fonts give us designers a whole new typographic palette with which to work. However, browsers handle the loading of web fonts in different ways, and this can lead to inconsistent user experiences. Safari, Chrome and Internet Explorer leave a blank space in place of the styled text while the web font is loading. Opera and Firefox show text with the default font which switches over when the web font has loaded, resulting in the so-called Flash of Unstyled Text (aka FOUT). Some people prefer Safari’s approach as it eliminates FOUT, others think the Firefox way is more appropriate as content can be read whilst fonts download. Whatever your preference, the WebFont Loader can make all browsers behave the same way. The WebFont Loader is a JavaScript library that gives you extra control over font loading. The WebFont Loader tells you when the following events happen as a browser downloads web fonts (or loads them from cache): Implementing the WebFont Loader Self-hosted fonts Fontdeck Typekit