CSS<br />Teckensnittslista<br />Översättningen använder omväxlande teckensnitt och typsnitt  som synonyma begrepp<br />
Vadär en teckensnittslista(font stack)? <br />
Teckensnittslistorhandlaromattskapa en relevant ochtillräckliglistaavreservtypsnitt– grundadpåderasstorleksförhållande, pl...
Ett dåligt exempel<br />
Vad är fel här?<br />body<br />{<br />	font-family: Verdana, Arial,<br />	sans-serif;<br />}<br />
Problem 1:Detärettbegränsatantal med reservteckensnitt.<br />
Problem 2:Teckensnittensomanvändskanskeintefinnstillgängligaförallaoperativsystem(t.ex. Windows, Mac, Linux). <br />
Problem 3:Teckensnittensomanvändsharolikastorleksförhållande<br />
Vadinnebärstorleksförhållande?<br />
Vissateckensnitt, speciellt de somtagitsframförskärm, kanvarabredareoch/ellerhögreänandrateckensnitt.<br />axax<br />Verda...
Detinnebärattdessaharolikastorleksförhållande.<br />
Om du användertypsnittmed olikastorleksförhållande, kanvissa se dinasidor med ettmindreteckensnittänandra.<br />body<br />...
Optimaltomfattar din typsnittslistaolikatypsnittsomharettliknandestorleksförhållande.<br />
De grundläggandetypsnittslistornagrundar sig påliknanadestorleksförhållande<br />
Bred sans-seriflistat.ex.:VerdanaGeneva<br />
Smal sans-serif-listat.ex.:TahomaArialHelvetica<br />
Bred serif-listat.ex.:GeorgiaUtopia<br />
Smal serif-listat.ex.:TimesTimes New Roman<br />
Monospace-listat.ex.:CourierCourier New<br />
Någrasteg mot attskapa en bra teckensnittslista<br />
1. Väljetttypsnitt du gillartex. Helvetica Neue<br />
2. Bestäm vilkengrundläggade typsnittslista den tillhör:t.ex. Narrow sans-serif<br />
3. Välj en önskadLinux-variant - och en med högtillgänglighett.ex. DejaVu Sans - 90.76% hos LinuxURW Gothic L - 97.14% hos...
4. Välj en önskad Macintosh-variant - och en med hög tillgänglighett.ex. Helvetica Neue - 95.11% hos Mac, Helvetica - 100....
5. Välj en önskad Windows-variant - och en med hög tillgänglighet t.ex. Arial - 99.32% hos Windows, Microsoft Sans-serif -...
6. Ta med ettallmänttypsnittt.ex. sans-serif<br />
7. Försäkra dig omatttypsnitt med mellanslaginamnetharenkel- ellerdubbel”fnuttar”.(t.ex. “Microsoft Sans-serif”)<br />
En bättreteckensnittsfamilj<br />body<br />{<br />	font-family:<br />"DejaVu Sans", "URW Gothic L", <br />	"Helvetica Neue...
Resultat<br />Font name<br />DejaVu Sans		<br />URW Gothic L	<br />Helvetica Neue	<br />Helvetica	<br />Arial	<br />Micros...
Ett bra verktygförattbyggatypsnittsfamiljerFont stackhttp://www.codestyle.org/servlets/FontStack<br />
Russ Weakley<br />Max Design<br />Site: maxdesign.com.au<br />Twitter: twitter.com/russmaxdesign<br />Slideshare: slidesha...
Upcoming SlideShare
Loading in …5
×

Hur bygger man en teckensnittslista?

840 views
723 views

Published on

En (godkänd) översättning av Russ Weakleys (Max design) presentation om font stacks

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
840
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hur bygger man en teckensnittslista?

  1. 1. CSS<br />Teckensnittslista<br />Översättningen använder omväxlande teckensnitt och typsnitt som synonyma begrepp<br />
  2. 2. Vadär en teckensnittslista(font stack)? <br />
  3. 3. Teckensnittslistorhandlaromattskapa en relevant ochtillräckliglistaavreservtypsnitt– grundadpåderasstorleksförhållande, plattform,operativsystemm.m.<br />
  4. 4. Ett dåligt exempel<br />
  5. 5. Vad är fel här?<br />body<br />{<br /> font-family: Verdana, Arial,<br /> sans-serif;<br />}<br />
  6. 6. Problem 1:Detärettbegränsatantal med reservteckensnitt.<br />
  7. 7. Problem 2:Teckensnittensomanvändskanskeintefinnstillgängligaförallaoperativsystem(t.ex. Windows, Mac, Linux). <br />
  8. 8. Problem 3:Teckensnittensomanvändsharolikastorleksförhållande<br />
  9. 9. Vadinnebärstorleksförhållande?<br />
  10. 10. Vissateckensnitt, speciellt de somtagitsframförskärm, kanvarabredareoch/ellerhögreänandrateckensnitt.<br />axax<br />Verdana @200pt<br />Helvetica @200pt<br />
  11. 11. Detinnebärattdessaharolikastorleksförhållande.<br />
  12. 12. Om du användertypsnittmed olikastorleksförhållande, kanvissa se dinasidor med ettmindreteckensnittänandra.<br />body<br />{<br /> font-family: Verdana, Arial,<br />sans-serif;<br />}<br />Större<br />Mindre<br />
  13. 13. Optimaltomfattar din typsnittslistaolikatypsnittsomharettliknandestorleksförhållande.<br />
  14. 14. De grundläggandetypsnittslistornagrundar sig påliknanadestorleksförhållande<br />
  15. 15. Bred sans-seriflistat.ex.:VerdanaGeneva<br />
  16. 16. Smal sans-serif-listat.ex.:TahomaArialHelvetica<br />
  17. 17. Bred serif-listat.ex.:GeorgiaUtopia<br />
  18. 18. Smal serif-listat.ex.:TimesTimes New Roman<br />
  19. 19. Monospace-listat.ex.:CourierCourier New<br />
  20. 20. Någrasteg mot attskapa en bra teckensnittslista<br />
  21. 21. 1. Väljetttypsnitt du gillartex. Helvetica Neue<br />
  22. 22. 2. Bestäm vilkengrundläggade typsnittslista den tillhör:t.ex. Narrow sans-serif<br />
  23. 23. 3. Välj en önskadLinux-variant - och en med högtillgänglighett.ex. DejaVu Sans - 90.76% hos LinuxURW Gothic L - 97.14% hos Linux<br />
  24. 24. 4. Välj en önskad Macintosh-variant - och en med hög tillgänglighett.ex. Helvetica Neue - 95.11% hos Mac, Helvetica - 100.00% hos Mac<br />
  25. 25. 5. Välj en önskad Windows-variant - och en med hög tillgänglighet t.ex. Arial - 99.32% hos Windows, Microsoft Sans-serif - 99.71% hos Windows<br />
  26. 26. 6. Ta med ettallmänttypsnittt.ex. sans-serif<br />
  27. 27. 7. Försäkra dig omatttypsnitt med mellanslaginamnetharenkel- ellerdubbel”fnuttar”.(t.ex. “Microsoft Sans-serif”)<br />
  28. 28. En bättreteckensnittsfamilj<br />body<br />{<br /> font-family:<br />"DejaVu Sans", "URW Gothic L", <br /> "Helvetica Neue, Helvetica, <br /> Arial, "Microsoft Sans Serif",<br /> sans-serif;<br />}<br />
  29. 29. Resultat<br />Font name<br />DejaVu Sans <br />URW Gothic L <br />Helvetica Neue <br />Helvetica <br />Arial <br />Microsoft Sans Serif <br />sans-serif <br />Windows<br />0.00% <br />0.00% <br />1.51%<br />7.08% <br />90.79%<br />0.62% <br />0.00% <br />Mac<br />0.00% <br />0.00%<br />95.11%<br />4.89%<br />0.00% <br />0.00% <br />0.00% <br />Linux<br />90.76%<br />8.98% <br />0.00% <br />0.07% <br />0.13% <br />0.00% <br />0.06% <br />
  30. 30. Ett bra verktygförattbyggatypsnittsfamiljerFont stackhttp://www.codestyle.org/servlets/FontStack<br />
  31. 31. Russ Weakley<br />Max Design<br />Site: maxdesign.com.au<br />Twitter: twitter.com/russmaxdesign<br />Slideshare: slideshare.net/maxdesign<br />Linkedin:linkedin.com/in/russweakley<br />(översättning: Thomas Lindbjer)<br />

×