Hur bygger man en teckensnittslista?

CSS
Teckensnittslista
Översättningen använder omväxlande teckensnitt och typsnitt som synonyma begrepp

Vadär en teckensnittslista(font stack)?

Teckensnittslistorhandlaromattskapa en relevant ochtillräckliglistaavreservtypsnitt– grundadpåderasstorleksförhållande, plattform,operativsystemm.m.

Ett dåligt exempel

Vad är fel här?
body
{
font-family: Verdana, Arial,
sans-serif;
}

Problem 1:Detärettbegränsatantal med reservteckensnitt.

Problem 2:Teckensnittensomanvändskanskeintefinnstillgängligaförallaoperativsystem(t.ex. Windows, Mac, Linux).

Problem 3:Teckensnittensomanvändsharolikastorleksförhållande

Vadinnebärstorleksförhållande?

Vissateckensnitt, speciellt de somtagitsframförskärm, kanvarabredareoch/ellerhögreänandrateckensnitt.
axax
Verdana @200pt
Helvetica @200pt

Detinnebärattdessaharolikastorleksförhållande.

Om du användertypsnittmed olikastorleksförhållande, kanvissa se dinasidor med ettmindreteckensnittänandra.
body
{
font-family: Verdana, Arial,
sans-serif;
}
Större
Mindre

Optimaltomfattar din typsnittslistaolikatypsnittsomharettliknandestorleksförhållande.

De grundläggandetypsnittslistornagrundar sig påliknanadestorleksförhållande

Bred sans-seriflistat.ex.:VerdanaGeneva

Smal sans-serif-listat.ex.:TahomaArialHelvetica

Bred serif-listat.ex.:GeorgiaUtopia

Smal serif-listat.ex.:TimesTimes New Roman

Monospace-listat.ex.:CourierCourier New

Någrasteg mot attskapa en bra teckensnittslista

1. Väljetttypsnitt du gillartex. Helvetica Neue

2. Bestäm vilkengrundläggade typsnittslista den tillhör:t.ex. Narrow sans-serif

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

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

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 ettallmänttypsnittt.ex. sans-serif

7. Försäkra dig omatttypsnitt med mellanslaginamnetharenkel- ellerdubbel”fnuttar”.(t.ex. “Microsoft Sans-serif”)

En bättreteckensnittsfamilj
body
{
font-family:
"DejaVu Sans", "URW Gothic L",
"Helvetica Neue, Helvetica,
Arial, "Microsoft Sans Serif",
sans-serif;
}

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 verktygförattbyggatypsnittsfamiljerFont stackhttp://www.codestyle.org/servlets/FontStack

Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin:linkedin.com/in/russweakley
(översättning: Thomas Lindbjer)

Hur bygger man en teckensnittslista?

by Thomas Lindbjer on Apr 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Hur bygger man en teckensnittslista? — Presentation Transcript