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é
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
18 règles typographiques pour rendre vos contenus plus lisibles Un des éléments essentiels pour rendre un contenu visuellement attrayant et agréable à lire est de s’assurer qu’il soit correctement mis en forme. En dehors du choix des couleurs, de la structure et des illustrations, la typographie influence la lisibilité et l’efficacité du message. Les possibilités en matière de polices de caractères sont illimitées. Mais il convient de suivre quelques règles pour rendre un texte banal séduisant et efficace. L’objectif prioritaire des règles typographiques : harmoniser fond et forme pour encourager la lecture ! La typographie est cruciale car elle facilite le processus de compréhension et d’assimilation de l’information. Une infographie en anglais liste 18 règles valables pour tous les types de textes, web ou print. Typographie, caractères, polices et fontes De manière générale, la typographie fait référence à l’agencement des caractères d’écriture. Les caractères mobiles ou types qui la composent sont la manifestation visuelle de la parole.
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
Team Fannypack La mise en forme du texte sur une page web Réussir la lisibilité d'un texte sur un site web demeure souvent un problème, quelle que soit la qualité d'un site. Les éléments essentiels d'une bonne conception visuelle sont le choix de la typographie et de couleurs adaptées. Lire une page web, c'est lire sur un écran. La lecture répétée et prolongée sur écran entraine en général une fatigue visuelle plus importante. Pour faciliter la lecture d'une page web, voici quelques règles typographiques et recommandations utiles. 1. La typographie joue un rôle très important dans l'image donnée par votre site. Des polices fantaisistes ou sérieuses donnent immédiatement le ton. Texte principal : la règle des 10 points. Il n'y a pas de règle absolue pour la taille des polices de caractères, mais il faut s'assurer que le texte principal soit au moins égal ou supérieur à 10 points. Si le texte principal est important, rien ne sert de réduire la taille de la police car votre texte ne sera pas lu. Choix des polices. Polices de caractères homogènes. 2.
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.
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
Checklist de 44 conseils pour bien écrire pour le Web - bonnes pratiques de rédaction web Les titres 1. Prévoir impérativement un titre pour chaque page. Le titre sera : 2. - Entre 4 et 10 mots. - Idéalement, le titre devrait tenir sur une seule ligne. - Éliminez tous adjectifs, prépositions et adverbes non indispensables. 3. - Utilisez une taille de caractère supérieure à celle du corps du texte. - Proscrivez les italiques, le souligné ou les majuscules. - Placez le titre au-dessus de la zone centrale de la page. - Balisez le titre <h1>pour les moteurs de recherche. 4. - Utilisez un vocabulaire compréhensible par le public visé. - Décrivez le sujet et la valeur ajoutée de l'article (anticipation du contenu). - Rejetez les acronymes et autres sigles qui exigent un décodeur. 5. - Invitez à la lecture du contenu, à condition de rester explicite. - Vérifiez si une phrase avec un verbe ne rend pas le titre plus dynamique. - Envisagez les titres sous forme de questions. 6. - Évitez les effets rhétoriques, les jeux de mots, la ponctuation exclamative, l'emphase promotionnelle exagérée. 7. 8. 9.
L_Demontiers : Typekit, Adobe, @font-face le le marché de la Typo - 17/08/2010 Vous n’êtes certainement pas passé à coté de l’annonce du partenariat entre Adobe et TypeKit. L’article est ici : Cette annonce à été grandement diffusée sur Twitter et j’ai impression qu’elle à été perçue comme quelque chose de positif. C’est vrai que la propriété CSS3 @font-face à ouvert des perspectives à la fois aux graphistes mais aussi à tous les acteurs de la chaine de production onscreen. Pour ce qui me concerne, en tant que Designer, ma responsabilité c’est d’offrir aux annonceurs un « Droit à la cohérence ». Adobe et TypeKit sont dans un bateau Les fontes Adobe sont disponibles chez TypeKit, oui, mais à quel prix ? … Hum … Bon déjà, je remarque que le prix de cette licence c’est écroulée de 150% en 6 mois. Un tel écroulement des tarifs n’est pas anodin. Parallèlement à cela, d’autres sites comme FontSquirrel ou Fondeck proposent déjà gratuitement des services très similaires à ceux de TypeKit. Quelques remarques sur TypeKit
Colour Assignment - Preferences Our preference for a specific color can be related to how we feel in any situation, how we want to feel, and even how we remember certain experiences (to name a few). This section, which is closely associated with the previous section color Associations, presents the survey participants preferences and how they vary between age groups and gender. This first section examines the question of favorite color for all participants regardless or gender or age. Figure 6.1 - Favorite Color Blue, for this group of people, is the most favored choice of the 8 colors available. Favorite Color by Gender When this data is examined further and filters of gender and age are applied, some interesting results surface. Figure 6.2 - Female Favorite Color Figure 6.3 - Male Favorite Color A review of color studies by Eysenck in the early 1940’s notes that St. Favorite Color by Age Group color preferences differ by the age of the participant. Figure 6.4 - Favorite Color by Age Group Least Favorite Color
Du poids des pages d'accueil Savez-vous combien pèse la page d’accueil de Yahoo ? Cette question n’est pas anodine car cette valeur a été pendant longtemps une unité de référence pour la vitesse de chargement des pages d’un site web. En presque 10 ans passés en agence, je ne compte plus le nombre de cahiers des charges et brief où il étai stipulé que le poids des pages du futur site du client ne devait EN AUCUN CAS dépasser la limite de 30 Ko (le poids théorique de la page d’accueil de Yahoo! dans l’inconscient collectif). Puis il a été question de 60 Ko… Puis ça a été l’avènement de l’ADSL, les années YouTube et maintenant plus personne ne se soucie du poids des pages. Oui mais voilà : Il fut un temps où la page d’accueil de Yahoo! Je me suis amusé à comparer les pages d’accueil de certaines boutiques en ligne française, et le résultat n’est pas brillant : Concernant les sites d’information, c’est encore pire : L’Express = 3,5 MoLiberation = 3,4 Mo20Minutes = 2,7 MoLeMonde = 2,2 Mo
Your Landing Page Sucks! Here are 10 Examples That Don’t… Don’t take that too personally, I’ve not actually seen your landing page yet. Rather, I’m going to cling to the assumption that it sucks simply because most of them do. Sad, but horribly true. Note: I’m bringing this post back from the archives. A) because it’s timeless, B) because it’s awesome and C) as a teaser to an upcoming landing page examples post. This is 10 teeny tiny thumbnails of the soon to be heretofore thought of as the greatest landing pages ever seen on November 23rd, 2010. A real-world style landing experience Imagine walking into a restaurant, and finding that the decor is gross, the music is too loud, the staff look sketchy, the menu has 400 options on it, they have an award on the wall for “Best meatloaf in Idaho, 1995″ and to top it all off, the place is empty. Excuse me waiter, could I just get the back button please? Soooooooo, today we’re going to take a trip down to the Top-Notch Landing Page Store and see if we can rustle up something to inspire your next design.