background preloader

Lisibilité des sites web, font-size : 100% – 16px

Lisibilité des sites web, font-size : 100% – 16px
Dans ce nouvel article je vais présenter les solutions mises en place par les webdesigners pour améliorer la lisibilité de leur contenu textuel. Je ferai une analyse des « bonnes » pratiques typographiques pour optimiser la lisibilité du contenu et présenterai une sélection de sites web affichant leur contenu textuel à la taille par défaut de 100% soit 16px. Trop gros ? Pas esthétique ? Cet article est disponible en Français et en Anglais : EnglishFrançais Le travail des webdesigners est de concevoir et de réaliser des sites web répondant à la problématique de leurs clients. La lisibilité du contenu est donc un point crucial qui doit attirer toute notre attention. Pour une meilleure lisibilité sur le web Bien qu’il n’existe pas de solution toute faite pour optimiser la lisibilité d’un contenu textuel sur le web, il existe cependant quelques rêgles qu’il est bon de connaître : Choisir un corps de texte suffisamment élevé. Optimisation du corps de texte pour une meilleure lisibilité Analog

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

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

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 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)

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

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 ).

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

Signification des couleurs dans les sites web La façon dont les couleurs influencent notre état d’âme, notre moral et notre corps est une chose vraiment passionnante. Le sujet du billet d’aujourd’hui concerne donc notre perception des couleurs dans le design web et de la manière elles sont utilisées par différentes compagnies dans leur site Internet. « Le billet suivant est une traduction d’un article paru sur le site web de 1stwebdesigner.com écrit par Anastasia Miles ». À la base, les couleurs sont divisées en 2 catégories. Les couleurs situées dans la zone rouge (sur le dessein à gauche) sont les couleurs chaudes (rouge, orange, jaune) et les couleurs situées dans la zone bleue sont les couleurs froides (bleu, mauve, vert). Dans les temps anciens, les gens croyaient que les couleurs pouvaient guérir de différentes maladies. Voici quelques analyses de quelques sites web de grandes marques connues à travers le monde. 1. 2. Habituellement, McDonalds utilise le jaune et le rouge (suscite l’excitation chez les enfants). 3. 4. 5.

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

Related: