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)