#Kerning on the Web | The Typekit Blog
▻http://blog.typekit.com/2014/02/05/kerning-on-the-web
Browser support for kerning is surprisingly good. With the exception of Chrome on Windows, all modern browsers support kerning. There are, however, some differences in how kerning is enabled, and whether it is turned on by default or not.
#typo
p {
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
}
mais je me demande s’il n’y a pas une erreur là (il me semble qu’il manque un 1 à la ligne font-feature-settings:)
Setting Type for User Interfaces | The Typekit Blog
▻http://blog.typekit.com/2013/03/28/setting-type-for-user-interfaces
As a UI designer, I do my best work within the bounds of a clear hierarchy of constraints. Because typography is the catalyst for my design work, the most important step I take at the beginning of a project is to select a typeface (or a set of them). Once this choice is made, I can develop a system to aid my decision-making process and, in so doing, avoid the terror of a blank canvas.
To narrow down the vast number of typeface options, I start out by defining the scope of the design problem before me in broad terms. This usually requires that I make a decision about the essential purpose of the project I’m working on. Is it a content-driven website that serves up information to be read at leisure? A task-driven web application oriented towards getting stuff done in a timely way? Or is it a site possessing both content-driven and task-oriented elements (like a CMS)?
#typo
Je viens d’avoir une catastrophe industrielle avec les #webfonts de chez Google, sur le site que je viens de livrer. Quelques usagers signalent que le rendu des fontes chez eux, sous Windows, est tout moche. Moi j’avais essayé chez moi, ça semblait OK.
Mais j’active le lissage « Cleartype » sous Windows XP, comme sous Windows 7 et là, sur tous les navigateurs (sauf MSIE9 !), le lissage des webfonts est totalement défaillant. Et c’est incurable : les hacks à base de text-shadow ou de rotation imperceptible ne semblent plus avoir d’effet. Grosse catastrophe : l’identité graphique du site repose sur ces webfonts, et je ne me vois pas tout recoder pour utiliser les images typographiques de SPIP (surtout que les CSS du site ne s’y prêtent pas vraiment).
Et je découvre, sur le blog du Typekit :
►http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows
Typekit se vante donc d’avoir (enfin ! ils ont vendu de la merde inutilisable à tout le monde avant ?) trouvé une parade : quelques unes de leurs polices balancent la version Postscript plutôt que Truetype. Et là, le lissage se fait correctement.
Très bien : il suffit donc que Google te balance un OpenType Postscript plutôt que TrueType. T’as qu’à écrire à Google…
Donc ce que j’ai dû faire :
– je télécharge la police de chez Google, version TrueType ;
– je fabrique les polices et les CSS qui vont bien grâce au #font-face generator de Font Squirrel :
►http://www.fontsquirrel.com/fontface/generator
– j’ouvre la police TTF dans FontLab, et je génère une version OpenType Poscript. Terminaison ".oft".
– je modifie la déclaration @font-face, pour appeler l’OFT à la place de la TTF, et en changeant l’ordre (sinon, je ne récupère pas la version OpenType) :
►http://pastebin.com/WVkAHSys
Ah oui : je viens d’y passer la fin de mon après-midi et je suis furieux. Utilisez @font-face, qu’ils disaient. En plus, j’ai été obligé de lire des forums Windows, et là tu imagines bien que j’ai envie de tuer quelqu’un (« Il suffit de demander à tes visiteurs de désactiver le lissage ClearType » étant la réponse la plus fréquente…).
Pour comprendre le drame :
►http://twitpic.com/7owqqe/full
Deux copies d’écran du Boston Globe (site tout nouveau tout beau qui utilise fièrement des @font-face). Vu dans Chrome sous Windows 7 (pas un vieux clou, donc).
– À gauche : lissage cleartype désactivé. Les titrailles, en webfonts, sont parfaitement lissées. Le texte courant (notamment le texte de l’article) n’est pas lissé. Ça, c’est la situation la moins pire, c’est juste que tu n’as pas le lissage du texte courant (du coup : le si joli et lisible Georgia ne ressemble à rien). C’est lisible, mais les empattements sont dessinés avec des pixels.
– À droite, l’utilisateur a activé le lissage Cleartype (évidemment, ça, tu ne le contrôles pas depuis ton site Web). Le texte courant est joliment lissé, et surtout les éléments de navigation en capitales de petite taille sont beaucoup plus lisibles et élégantes. En revanche, la titraille est carrément moche (si j’ai bien compris, lissée horizontalement, mais pas verticalement). Vu que c’est de la titraille en grand corps, je trouve ça particulièrement vilain : tu crois faire un site avec les dernières technologies de 2011, et vlan, on se croirait sur un PC des années 90. (Et avec d’autres polices, c’est encore plus laid.)
L’image ne semble pas se charger ce qui m’attriste vu que j’étais curieux de voir ça…
C’est Twitpic qui a des problèmes. Suit le lien, et force le rechargement. Ça finira par venir.
Windows n’est-il pas sensé prendre en charge les polices eot ?
Bon, en tout cas, je fais tourner...
Ici, il est conseillé d’activer la version svgz de la police.
La révolution font-face | David Lemaitre
►http://www.davidlemaitre.com/blog/2011/05/04/la-revolution-font-face
J’ai élaboré une syntaxe @font-face améliorée permettant d’obtenir le meilleur rendu sur tous les navigateurs, toutes versions et OS confondus, ClearType activé ou non !
Au préalable, il est nécessaire d’ajouter la déclaration du format compressé SVGZ à Apache dans le fichier .htaccess de votre site
@arno pas de risque avec l’astuce du svgz quand iOS le supportera ?
Type rendering on the web « The Typekit Blog
►http://blog.typekit.com/2010/10/05/type-rendering-on-the-web
Une série de 7 articles sur le blog de Typekit à propos du rendu typo pour le web.
Back when web fonts were in their infancy, I asked typophiles to help me understand why fonts look the way they do in web browsers. A year and a half later, with their help, advice from a few expert type technicians, and lots of research here at Typekit, we’re starting to fully understand type rendering on the web.
►http://typekit.files.wordpress.com/2010/10/aaaa.png?w=560&h=180
#typographie #webdesign
CSS properties that affect type rendering « The Typekit Blog
►http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering
So: as a web designer, font rendering is mostly out of your hands. But it’s important to remember that certain styles within your control can have an effect. When testing, keep in mind that different styles for contrast, size, color, and rotation can result in significant differences.
Case Study: Getting Hardboiled with #CSS3 2D Transforms « The Typekit Blog
►http://blog.typekit.com/2011/01/25/case-study-getting-hardboiled-with-css3-2d-transforms
This is part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design.
In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.