La typographie, mon navigateur et moi

  • 8,869 views
Uploaded on

Conférence donnée à Paris Web 2011

Conférence donnée à Paris Web 2011

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,869
On Slideshare
0
From Embeds
0
Number of Embeds
16

Actions

Shares
Downloads
22
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. La typographie ,mon navigateur et moi — Paris Web 2011 Par Jérémie Patonnier @JeremiePat / @typographisme
  • 2. Un peu dhistoireTaille de pierre et calligraphie
  • 3. Un peu dhistoireGutenberg et les caractères amovibles
  • 4. Un peu dhistoireLa révolution numérique : La PAO et le Web
  • 5. Lencodage des caractèresUn ordinateur nest quune machine à calculer
  • 6. Lencodage des caractères Différentes normes dencodage US ASCII (128 Caractères)Windows/Mac (256 Caractères)ISO Latin (512 Caractères)Unicode (Presque tous)
  • 7. Les formats de fonteLes principaux formatsPostScriptTrueTypeOpenTypeWOFFMais aussi  : SVG, EOT
  • 8. Les formats de fonteLes options OpenType Hinting Kerning Ligatures Petites cap. Etc.
  • 9. Linfluence des OS Différents moteurs de rendus Mac OS  : CoreTextWindows 7  : DirectDraw / GDIWindows XP  : GDILinux  : FreeType 2  ?
  • 10. Linfluence des OS Différentes gestion de lanti-aliasing ClearTypestandardsno-antialiasing
  • 11. Les navigateursQui utilise quoi ?Les navigateurs suivent lOSMac OS : Core TextWinXP : GDI + StandardsWin7 : GDI/DirectDraw + ClearTypeAttention à IE7 et 8IE7 utilise ClearTypeIE8 utilise ClearType etforce le système à lutiliser
  • 12. Les navigateursCSS @font-faceEn gros, ça marche partoutEn détail... euh... presque
  • 13. Les navigateursCSS3 Font & CSS3 Textfont-variant-*hyphens (Césures)text-align : <string>text-decorationtext-shadow
  • 14. Des solutions simplesKISS is back !Testez vos fonteshttp://webfontspecimen.comhttp://wfs.typographisme.netOptimisez vos fonteshttp://www.fontsquirrel.com
  • 15. Merci :) — @JeremiePat @typographisme —http://typographisme.net