Följande artikel hjälper dig: CSS-typografi: tekniker och bästa praxis
I den första delen av den här serien diskuterade vi några grundläggande begrepp som hör till CSS-typografi. Nu ska vi täcka några utmärkta tekniker, tips, tricks och bästa praxis för att hantera typografi på webbplatser. Det här är andra delen av en tredelad serie guider om CSS-typografi som kommer att täcka allt från grundläggande syntax till bästa praxis och verktyg relaterade till CSS-typografi.
Bättre webbtypografi med @font-face
För vanliga textblock är det en bra idé att använda smarta typsnittsstaplar (som diskuteras i första delen), men för rubriker och korta textblock kan mer intressanta typsnitt användas med hjälp av @font-face. När det implementeras korrekt är @font-face kompatibel med ett brett utbud av webbläsare – ja, till och med IE. Inkludera bara en kopia av teckensnittets fil på din webbserver och använd @font-face-regeln i din CSS-kod enligt följande:
@font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot); }
Använd sedan teckensnittsfamiljen som deklareras ovan med din CSS:
h1, h2, h3, h4, h5, h6 { /* Använd alltid en teckensnittsstack, även med anpassade webbteckensnitt! */ teckensnittsfamilj: CurlzMTRegular, Helvetica, Arial, sans-serif; }
Medan IE4+ stöder @font-face, måste typsnittet vara i filformatet. Enkelt nog – kör bara valfritt typsnitt genom denna omvandlare först: ttf ? eot omvandlare.
För mer information om @font-face, läs följande:
För enklare implementering av @font-face, kolla in Font Squirrels @font-face-generator.
Vertikal rytm
Att designa webbtypografi handlar om läsbarhet och läsbarhet. En ledande faktor för stor läsbarhet och läsbarhet är hur texten flyter vertikalt på sidan.
Är texten för sammanpressad eller är den för långt ifrån varandra? Det är här en förståelse och praktisk implementering av vertikal rytm kan komma väl till pass. Vertikal rytm är avståndet och arrangemanget av text när användaren läser ner på sidan.
Källa: Get The Eye Vertical rytmen handlar i första hand om teckenstorlek och linjehöjd, men även topp-/bottenmarginaler och utfyllnad. Konceptet med vertikal rytm är enkelt: Linjehöjder, marginaler och utfyllnad ska alla vara lika eller inom jämn proportion. Här är ett exempel:
p, ol, ul, blockquote, pre, code { line-height: 18px; marginal-botten 18px; /* 1,5em ger bra vertikalt avstånd (= 150 % av teckenstorleken) */ linjehöjd: 1,5 em; marginal-botten: 1,5 em; }
Tänk på toppmarginaler och utfyllnad med textblock (t.ex
stycken, listor, blockcitat), samt med bilder och andra element på blocknivå. Försök att använda samma linjehöjd eller använd multiplar av den (t.ex. 18px, 32px, 64px och så vidare för exemplet ovan). Även proportioner är lätta att göra med lite matematik.
Låt oss försöka ta reda på vad linjehöjden ska vara i följande exempel.
h1 { font-size: 2em; radavstånd: ?; }
Om linjehöjden för kroppen är inställd på 1,5 em, behöver vi bara dividera det med vår teckenstorlek för att bibehålla proportionen: 1,5 em/2em = 0,75 em.
h1 { font-size: 2em; radavstånd: 0,75 em; }
För teckenstorlekar som är större än linjehöjden måste linjehöjden minskas för att matcha baslinjerutnätet.
För teckenstorlekar som är mindre än linjehöjden måste vi öka linjehöjden. Vi kan bestämma linjehöjden för mindre teckenstorlekar med samma mattebit. Låt oss försöka igen, men den här gången är vår teckensnittsstorlek mindre än kroppselementets linjehöjd.
h2 { font-size: .7em; radavstånd: ?; }
Om kroppens linjehöjd fortfarande är 1,5 em, så tar vi det och dividerat med vår teckenstorlek: 1,5em/.7em = 2,14em.
h2 { font-size: .7em; linjehöjd: 2,14em; }
För mer information om att skapa baslinje eller vertikal rytm i webbsideslayouter, titta igenom resurserna nedan. Det finns också en praktisk vertikal rytmgenerator, ifall du inte vill göra all den där matematiken.
Arbeta med text och blanksteg CSS-egenskaper
@font-face och vertikal rytm kan ibland bli överväldigande, så låt oss sakta ner det lite och gå tillbaka till några grundläggande tekniker.
Text CSS-egenskaper
CSS-textegenskapsgruppen innehåller flera egenskaper för att hantera textstilen. Att ha en god förståelse för dessa egenskaper kan hjälpa till att få textblock i dina designs till en mer användarvänlig nivå.
Här är några text-CSS-egenskaper (deras namn är självklara för vad de är till för):
- text-align: värden kan vara vänster, centrera, höger eller justera
- text-dekoration: värden kan vara överstrukna, genomlinjerade eller understrukna eller blinka
- text-transform: värden kan vara versaler, gemener eller versaler
Låt oss se hur en av dessa egenskaper fungerar med hjälp av ett exempel. I följande exempel drar vi in början av alla stycken:
p { text-indent: 3em; }
Textriktning
Du kan ställa in textens riktning genom att använda egenskapen direction. Standardriktningen är ltr, vilket är en förkortning för .
Anta att vi ville vända på det, då kan vi ställa in riktningen till rtl.
p { riktning: rtl; }
Egenskapen direction är inte särskilt populär eftersom den har ett mycket specialiserat syfte, men den kan komma väl till pass när man arbetar med andra skriftspråk. Många mellanösternspråk läses till exempel från höger till vänster.
Vit-mellanrum, Bokstavsmellanrum och Ord-mellanrum
Dessa egenskaper ger avstånd mellan ord och bokstäver. Egenskapen blanksteg styr hur text radbryts inuti det överordnade elementet. Värden kan vara normala, nowrap, pre, pre-line, pre-wrap och inherit.
Ordavståndsegenskapen påverkar utrymmet mellan orden. Värden kan ta vilken CSS-mått som helst (som 0,5em eller 5px). Egenskapen för bokstavsmellanrum liknar egenskapen ordavstånd, men den handlar istället om avståndet mellan enskilda tecken.
Värden för den här egenskapen kan ta vilken CSS-mått som helst.
Text skuggor
CSS3 ger oss några fler CSS-egenskaper för användning på webbtypografi. En egenskap som är ett nytt tillägg till CSS är text-shadow.
Här är stilregeln för att ge stycken en fin textskugga.
p { text-shadow: 1px 1px 1px #000; }
Från: Neutronskapelser För att skapa infälld text kan du använda negativa värden som sådana:
h1 { /* Använd negativa förskjutningar för att skapa infälld text. */ text-shadow: #000 -1px -1px 0;}
För att se text-skugga i aktion, kolla in den här handledningen om hur du skapar infälld typografi med CSS3.
Bästa metoder för CSS-typografi
Vad som följer är en genomgång av bästa praxis som vi redan har täckt, samt några ytterligare. Nyckelkonceptet att tänka på är att CSS-typografi handlar om att skapa läsbar typ som förbättrar användarupplevelsen.
Serif eller Sans Serif?
Det finns ingen avgörande studie som tyder på att en grupp av typer är mer läsbar än den andra.
Det som påverkar läsbarheten mest är de CSS-egenskaper vi har diskuterat, såsom teckenstorlek och bokstavsmellanrum. För serif-teckensnitt, använd mer radhöjd, bokstavsmellanrum och kanske till och med ordavstånd eftersom serif-teckensnitt behöver lite utrymme för att andas och uttrycka sina krökningar. För sans serif-teckensnitt kan den enklare typsnittsstilen tillåta snävare avstånd och mindre teckenstorlekar med minst negativ effekt på läsbarheten.
Semantisk markering
Använd alltid rätt uppmärkning. Använd till exempel istället för och istället för och använd sedan CSS för att stila dem. Använd rubriker (h1-h6) på rätt sätt: för att avgränsa delar av ditt innehåll i logiska grupper.
Att använda
efter
Använd till exempel istället för
.
Skapa baslinjestilar
Det är alltid bra att minska gissningsleken som webbläsare spelar när de inte kan hitta en stilregel för ett visst element. Glöm inte att utforma grundläggande HTML-element.
h1, h2, h3, h4, h5, h6 { } p { } ol, ul { } a { } blockcitat { } pre, code { } small { }
Använd 1,5em för linjehöjd
1,5 em är den vanligaste och mest rekommenderade baslinjehöjden; den anger att radhöjden är +50 % av textens teckenstorlek, vilket ger textblock lite vertikalt andrum. Detta är inte att säga att något annat linjehöjdsvärde är dåligt; men när du är osäker är 1,5em ett säkert kort. Att använda en relativ måttenhet för linjehöjd tar också ut den matematik som är involverad i att behöva räkna ut motsvarande linjehöjd, som visas i detta exempel:
p { font-size: 12px/1,5em; }
För en teckensnittsstorlek på 12 px kan en linjehöjd på 18 px användas för att uppnå exakt samma resultat, men då måste du räkna om vad det värdet skulle vara om din teckensnittsstorlek ändras för andra element.
Använd stenografi CSS
Använd alltid stenografi varhelst du kan eftersom det är det vanliga sättet att skriva CSS nuförtiden. Här är förkortningsstrukturen för teckensnittsegenskapen:
font: [font-style] [font-size]/[line-height] [font-family 1, font-family 2, …, font-family n]
Till exempel:
p { teckensnitt: normal 12px/1,5em Arial, Helvetica, sans-serif; }
Slutsats
I den här delen täckte vi några tekniker, knep och bästa metoder för CSS-typografi. I nästa del kommer vi att presentera några exempel på bra CSS-typografi samt några verktyg som du kan använda för att göra ditt liv enklare.
