background preloader

Revised Font Stack

Revised Font Stack
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.”—Nathan Ford, Better CSS font stacks 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; 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. Related:  CSS

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. Alors qu’il était déjà difficile d’utiliser intelligemment les polices de la petite liste dite « web-safe », celà devient carrément compliqué de s’y retrouver sans être typographe avec ces milliers de polices à portée de main… Sachant qu’en rêgle générale, plus nous avons de choix possibles, plus nous avons du mal à choisir, alors autant revenir aux bases pour faire des choix cohérents. Evaluation de la lisibilité J’ai donc décidé de me lancer dans une petite série de tests basiques pour évaluer la lisibilité des polices proposées par Google dans son « Google font directory ».

Adaptive Images in HTML 8 Definitive Web Font Stacks Article A more traditional Garamond-based serif stack: font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; The Helvetica/Arial-based sans serif stack: font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; The Verdana-based sans serif stack: font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; The Trebuchet-based sans serif stack: The heavier “Impact” sans serif stack: The monospace stack: Rationale behind the Stacks

Handpicked free fonts for graphic designers with commercial-use licenses. Increasing the Clickable Area of Inline Links Demo It has been best prac­tice for some time now to ensure that nav­ig­a­tion links have appro­pri­ate pad­ding. This makes click­ing these links much easier, espe­cially if you are on a mobile device. Why aren’t we tak­ing this one step fur­ther? Now keep in mind that this is only a thought. The trick is to be subtle with this tech­nique; increase the click area enough that users don’t have to be 100% accur­ate, but don’t increase it too much so that the beha­vior becomes unex­pec­ted. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this tech­nique? Tweet this

Lisibilité des sites web, font-size : 100% – 16px | All For Design 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 ? Hum… pas si sur que ça… 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é. Wilson Miner : Relative Readability Analog

Merging Realities: Skeuomorphic Design Infographic Auditory skeuomorph This type of skeuomorphism can be easily illustrated with audio effect that imitates that sound of the camera shutter while you are taking pictures with your cell phone. You know that there is no mechanical shutter in your device but it does exactly the same sound like its real life analogue. Visual skeuomorph Visual skeuomorphism refers to using various textures (wooden, metallic, paper etc.) which will emulate design of things from the real world. Spoke patterns Various spoke patterns in automobile hubcaps and wheels resembling earlier wheel construction (wooden spokes or wire spokes). Leather grain Artificial leather grain on items that traditionally used leather but now use plastics, such as car dashboards and books. Nonfunctional pockets Nonfunctional pockets in clothing. Cork textures Cigarettes with the paper around their filter printed to look like cork. Flame-shaped light bulbs Fake candles with flame-shaped light bulbs on electric chandeliers. Familiarity Engagement

Why And How To Use Icon Fonts As great as images are, they present challenges in designing websites. They add file weight. They require additional http requests. They don’t scale well. The Advantages of Icon Fonts Bitmap images don’t scale well. Fonts don’t have these problems. Icon fonts are awesome. Scale easilyChange color easilyInclude shadows easilyCan have transparent knockoutsHave good browser support in generalCan use text based css (still needs better support)Can be designed on the fly (by making changes on :hover, etc.)Can do anything image icons can do (change opacity, rotate, etc.)Have smaller file sizes since they contain fewer characters than full typeface Let’s see your bitmapped images do all that. How to Use Icon Fonts The first step in using icon fonts is to find and embed the font. From here you typically have 3 options. Wrap your icon in htmlUse css generated contentUse the data-icon attribute Wrap Icon Fonts in HTML The first option is simple. Use CSS Generated Content The magic happens in the css.

cufón - fonts for the people LESS « The Dynamic Stylesheet language 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. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS. 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 Here are some listed for body text: For headlines: 8 Definitive Web Font Stacks