hur bygger man en teckensnittslista?

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)