-
-
Introducing Adobe Blank « Typblography
http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.htmlEarlier this year, the Adobe Type Team was approached by one of our other development teams to produce a special-purpose font with two fascinating—at least to me—characteristics:
All Unicode code points are covered.
All code points are rendered using a non-spacing and non-marking glyph. -
Using Type: Getting #font-face Right, Preventing Faux Bold « FontShop Blog
http://blog.fontshop.com/2013/02/14/using-type-getting-font-face-right-preventing-faux-boldFirst, thanks Art Blanc for requesting that I add this brief bit as an extension to Using Styles Properly. Designing with professional webfonts, you’ve generally got two options. Host your own, or go with someone like Typekit or Webtype that handles the hosting and serving of font files as needed. I’ll focus on the first case, but this is still pretty applicable to the second, as it will point out why problems like faux bold and faux italic occur, and how to fix them.
-
Frontend SPOF in Beijing | High Performance Web Sites
http://www.stevesouders.com/blog/2012/03/28/frontend-spof-in-beijingdes sites peuvent se bloquer totalement à cause de scripts synchrones chargés depuis twitter etc, si ces sites sont censurés (firewall d’entreprise ou de pays).
des conseils aussi pour ne pas trop avoir de problèmes d’affichage avec @font-face :
►http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance -
The New #Web #Typography
http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.htmlTYPE ON THE WEB IS ABOUT TO CHANGE FOREVER. AGAIN.
As the #font-face rule emerged, it brought with it sweeping changes to the visual landscape of the web. The designer’s toolkit grew substantially, but this integration was only partial. Many typefaces were stripped of their most powerful features: things like swashes, alternates and small caps. These details help to make typefaces more useful and expressive. Now, as #OpenType features become accessible in more browsers, this expressive power can raise typography on the web to an even higher level.TABLE OF CONTENTS
Small Caps
Ligatures
Numerals
Kerning
Fractions
Alternates-
Arg : le premier exemple est (évidemment ?) l’utilisation des small caps.
/ use small-caps /
.smallcaps {
-moz-font-feature-settings : « smcp=1 » ;
-ms-font-feature-settings : « smcp » 1 ;
}
Sauf qu’en CSS, il y a déjà ça :
font-variant: small-caps;
Le second exemple indique comment « activer » les ligatures qui sont déjà activées par défaut (liga), et que tu peux déjà forcer par :
text-rendering: optimizeLegibility;
Un autre exemple explique comment « activer » le kerning (dont on peut tout de même espérer qu’il est toujours activé par défaut), que tu peux déjà forcer par :
text-rendering: optimizeLegibility;
Et comme le dit la recommandation :
http://dev.w3.org/csswg/css3-fontsAuthors should generally use ‘font-variant’ and its related subproperties whenever possible and only use this property for special cases where its use is the only way of accessing a particular infrequently used font feature.
On a donc ici 3 exemples (sur 6) qui consistent à recommander d’appeler le nom informatique d’une feature OpenType dans un appel cryptique de bas niveau (les features OpenType correspondent, de manière standardisée, à des caractéristiques typographiques identifiées et nommées), plutôt que d’appeler des CSS « normales » et lisibles par un être humain.
-
-
Il faudrait pouvoir partager un commentaire, sur @seenthis et sur Twitter et autres, c’est parfois plus intéressant que le seen initial... #seenthis_souhait
-
-
-
-
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
(mise à jour : l’appel à .woff passe avant .otf, sinon Firefox Windows ne fait plus le lissage)
– et je vire l’appel aux webfonts de Google, puisque je n’utilise plus ces cochonneries qui, en pratique, ont toutes les chances de s’afficher de manière désastreuse sous Windows (tu te rends compte : moche sous Windows 7 avec Chrome dernière version !? et ils te préviennent pas ?).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/fullDeux 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-faceJ’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
-
-
-
-
►http://test.prelude-prod.fr
Faites le test pour alimenter les stats autours de la visibilité des polices lissées.
Les résultats sont là : http://test.prelude-prod.fr/stats.php -
Google Webfonts V2
Nouvelle interface graphique en test de Google Webfonts
http://www.google.com/webfonts/v2Elle est présentée sur leur blog :
“The Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you’ve requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.”
http://googlewebfonts.blogspot.com/2011/06/new-face-of-google-web-fonts.html
#font-face #typographie #webfonts-
Je découvre (avec horreur) que 95% de ces polices ne contiennent pas le œ, ni le Œ, et pas le Ÿ non plus. 25 ans après, on continue donc à subir les conséquences d’ISO 8859-1.
De plus, aucune ne semble contenir le symbole €.
-
Oui, aucune ne contient le signe euro, pour les autres caractères seules les polices qui ont le jeu Latin Extended les ont (ce qui ne fait pas lourd, et c’est loin d’être les plus chouettes). Typekit’s not dead.
-
-
The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricksMost browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.
-
Merci @fil The New Bulletproof #Font-Face Syntax | Fontspring
►http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxIn September 2009, Paul Irish came up with the Bulletproof syntax for writing the font-face declaration. It was compact and worked across all browsers at the time. Recent, growing complaints that fonts weren’t loading in Android, led us to recommended the Mo’ Bulletproofer syntax devised by Richard Fink instead. Unfortunately Mo’ Bulletproofer requires double declarations and is therefore harder to maintain.
-
Maitriser le délai d’affichage des fontes - Typographisme
http://typographisme.net/post/Maitriser-le-délais-d-affichage-des-fontesÀ titre personnel, je suis plutôt partisan de la méthode choisie par Firefox et Opera. En effet, le Web est un milieu hostile où l’on ne maîtrise pas les conditions de rendu ni la latence réseau. En conséquence je préfère être sûr que mes visiteurs pourront lire le texte plutôt que d’être sûr que celui-ci sera joli (mais si je peux avoir les deux, je préfère encore plus). Ceci étant, si vous construisez des sites où le design est primordial et où le contenu textuel n’est qu’un soutien graphique, il est effectivement souhaitable d’avoir un comportement comme celui de Safari, Chrome ou Internet Explorer. Ah ! Cruel dilemme.
LIMITER LE CLIGNOTEMENT
Allons courage, il n’y a pas de fatalité, et il est possible de réduire les inconvénients liés à l’une ou l’autre des solutions d’affichage. D’abord voyons comment limiter l’effet de clignotement de Firefox et Opera.
-
Glossaire de termes typographiques
http://www.adobe.com/fr/type/topics/glossary.html
Un glossaire de termes typographiques proposé par Adobe, pour tous ceux qui s’intéressent enfin à ce sujet grâce à l’explosion de @font-face sur le Web depuis peu !
#font-face #typographie #glossaire #terme #vocabulaire #gp:links -
Typecut :: Modules pour Firefox
https://addons.mozilla.org/fr/firefox/addon/61269?collection_uuid=38e04bf2-accc-dcbb-37b8-b30a96dc0fa1“The Firebug plugin that extracts embedded (Typekit) font resources from websites and allows their separate download.”
#font-face #fonte #police #dev #web #firebug #clevermarks #extension #Firefox #Typekit
-
FireFontFamily :: Modules pour Firefox
https://addons.mozilla.org/fr/firefox/addon/111672“Highlight the rendered font-family in Firebug”
#font-face #fonte #police #dev #web #firebug #Firefox #extension #clevermarks
-
webfontfontuserguide.pdf (application/pdf Object)
http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdfdoc de synthèse sur typographie et CSS (@font-face)
#webdesign #web #typography #font #fonts #html5 #css3 #pdf #font-face #webdev #css #filetype_pdf #media_document
-
-
ASK KEN™ - Visual Knowledge Browser
http://askken.heroku.com“ASK KEN™ is sort of a Node-Link diagram that allows to visually navigate through interconnected topics provided by the Freebase Service. It takes advantage of the latest HTML5 features by using the canvas element for drawing.”
-
-
Mo’ Bulletproofer @Font-Face CSS Syntax
http://readableweb.com/mo-bulletproofer-font-face-css-syntax“After careful consideration, research, and discussion – I strongly recommend that you don’t use local() at all”
-
24 ways: Real Fonts and Rendering: The New Elephant in the Room
http://24ways.org/2009/real-fonts-and-rendering#pixel_perfect #design #web #fonte #font-face #clevermarks #rendu #perfection
-
Font Squirrel | Create Your Own @font-face Kits
►http://www.fontsquirrel.com/fontface/generator#font-face #font-face #fonte #générateur #TTF #OTF #dev #web #css #clevermarks
-
Font Squirrel | Download Hundreds of Free @font-face Fonts
http://www.fontsquirrel.com/fontface#web #webdesign #css #typography #typographie #download #font-face #css3 #resources #html
-
Web Open Font Format for Firefox 3.6 at hacks.mozilla.org
►http://hacks.mozilla.org/2009/10/woff#web #webdesign #css #typographie #css3 #typography #font #font-face #woff #webfonts
-
Bulletproof @font-face syntax « Paul Irish
►http://paulirish.com/2009/bulletproof-font-face-implementation-syntax#fonte #police #css #typographie #html #font-face #font-face
-
The League of Moveable Type
►http://www.theleagueofmoveabletype.com"Here, you’ll find only the most well-made, free
#fonte #police #font-face #web #typographie #logiciel_libre #clevermarks
0
|
25