hur bygger man en teckensnittslista?
DESCRIPTION
En (godkänd) översättning av Russ Weakleys (Max design) presentation om font stacksTRANSCRIPT
CSSTeckensnittslista
Översättningen använder omväxlande teckensnitt och typsnitt som synonyma begrepp
Vad är en teckensnittslista
(font stack)?
Teckensnittslistor handlar om att skapa en relevant och tillräcklig lista av reservtypsnitt – grundad
på deras storleksförhållande, plattform,operativsystem m.m.
Ett dåligt exempel
body{
font-family: Verdana, Arial,sans-serif;
}
Vad är fel här?
Problem 1:Det är ett begränsat antal med
reservteckensnitt.
Problem 2:Teckensnitten som används
kanske inte finns tillgängliga för alla operativsystem
(t.ex. Windows, Mac, Linux).
Problem 3:Teckensnitten som används har olika storleksförhållande
Vad innebärstorleksförhållande?
Vissa teckensnitt, speciellt de som tagits fram för skärm, kan vara bredare och/eller högre än andra teckensnitt.
ax axVerdana @200pt Helvetica @200pt
Det innebär att dessa har olika storleksförhållande.
Om du använder typsnitt med olika storleksförhållande, kan vissa se dina sidor med ett
mindre teckensnitt än andra.
body{
font-family: Verdana, Arial,sans-serif;
}
Större
Mindre
Optimalt omfattar din typsnittslista olika typsnitt
som har ett liknande storleksförhållande.
De grundläggande typsnittslistorna grundar sig på
liknanade storleksförhållande
Bred sans-seriflista
t.ex.:
VerdanaGeneva
Smal sans-serif-lista
t.ex.:
TahomaArial
Helvetica
Bred serif-lista
t.ex.:
GeorgiaUtopia
Smal serif-lista
t.ex.:
TimesTimes New Roman
Monospace-lista
t.ex.:
CourierCourier New
Några steg mot att skapa en bra
teckensnittslista
1. Välj ett typsnitt du gillar
tex. Helvetica Neue
2. Bestäm vilkengrundläggade typsnittslista
den tillhör:
t.ex. Narrow sans-serif
3. Välj en önskad Linux-variant - och en med hög tillgänglighet
t.ex. DejaVu Sans - 90.76% hos Linux URW Gothic L - 97.14% hos Linux
4. Välj en önskad Macintosh-variant - och en med hög
tillgänglighet
t.ex. Helvetica Neue - 95.11% hos Mac, Helvetica - 100.00% hos Mac
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
6. Ta med ett allmänt typsnitt
t.ex. sans-serif
7. Försäkra dig om att typsnitt med mellanslag i namnet har
enkel- eller dubbel”fnuttar”.
(t.ex. “Microsoft Sans-serif”)
body{
font-family:"DejaVu Sans", "URW Gothic L", "Helvetica Neue, Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
En bättre teckensnittsfamilj
Resultat
Font name
DejaVu Sans
URW Gothic L
Helvetica Neue
Helvetica
Arial
Microsoft Sans Serif
sans-serif
Windows
0.00%
0.00%
1.51%
7.08%
90.79%
0.62%
0.00%
Mac
0.00%
0.00%
95.11%
4.89%
0.00%
0.00%
0.00%
Linux
90.76%
8.98%
0.00%
0.07%
0.13%
0.00%
0.06%
Ett bra verktyg för att byggatypsnittsfamiljer
Font stackhttp://www.codestyle.org/servlets/FontStack
Russ WeakleyMax Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
(översättning: Thomas Lindbjer)