Släng in koden i functions.php, byt ut “Helvetica Neue”, Helvetica, Verdana,sans-serif mot din fontstack.

function custom_admin_style() { 
	echo '<style type="text/css">body, td, textarea, input, select { font-family: "Helvetica Neue", Helvetica, Verdana,sans-serif;</style>';
}
add_action('admin_head', 'custom_admin_style');

Kommer dela med mig av fem favoriter av både vanliga, och en del ovanliga, typsnitt som jag brukar snegla på och använda i olika projekt med font-face. Fler kan hittas hos FontSquirrel där du enkelt kan filtrera vilka typsnitt som får användas fritt och bäddas in i din webbdesign.

1. Walkway

2. Sovereign Regular

3. Chinease Rocks

4. Otari

5. Grov Condensed

Har du andra rekommenderade typsnitt som är lite mer ovanliga? Tipsa gärna om dem!

@font-face med typsnittet GrauBlauWeb

Nåväl, tänkte gå igenom lite snabbt hur du kan lösa snygga fonts för större delen av dina besökare, men även med typografisk fallback för de som inte har stöd för tekniken.

För det första så är det en stor skillnad vi måste reda ut, Internet Explorer stödjer enbart @font-face via sitt egna format .eot (Embeded Open Type) och inte .otf, vilket är det öppna typsnittsformatet, som resten av webbläsarna. Microsoft har därför lagt ut ett uråldrigt verktyg på 20MB som kan konvertera .ttf till oet. Detta känns krångligt eftersom det finns smartare vägar via onlineverktyg.

Verktygen som vi ska användas är först: Online font converter vilket konverterar typsnittet till .ttf, sedan ttf2eot vilket tar hand om den sista konverteringen till .eot. När .eot-filen är redo på din dator så är också du redo att implementera CSSen som krävs för att få det hela att fungera.

@font-face {
    font-family: 'namn';
    src: url('din/katalog/namn.eot');
    src: url('din/katalog/namn.eot?#iefix') format('embedded-opentype'),
         url('din/katalog/namn.woff') format('woff'),
         url('din/katalog/namn.ttf') format('truetype'),
         url('din/katalog/namn.svg#namn') format('svg');
    font-weight: normal;
    font-style: normal;
}

Byt ut “namn” till det du tycker att typsnittet ska heta i CSS-filen, helst och mest logiskt så döper man nog det till typsnittets namn.

.head { font-family: namn, Arial, sans-serif; }

Ovanstående kod är ganska simpel, namn är det namnet du har gett ditt typsnitt, Arial står för din fallback, som kan bytas ut till ett webbsäkert typsnitt som ser ut som det nya typsnittet. En fallback är att rekommendera för att fånga upp de sista 25% av besökarna som inte har stöd för tekniken.

Hoppas du har förstått grunderna i konceptet, det finns mer att läsa på css3.info och w3.org annars.

Problemet med CSS, och typografi på webben i övrigt, har varit hur man ska kalkylera blockstorleken på ett element för att det ska bli “lagom” längd att läsa. Problemet ligger oftast att längden varierar med textstorleken man väljer så det finns aldrig något definitivt och att en underliggande regel, speciellt för många webbdesigners, har varit att 550px är lagom för 11px-12px text.

Fel, fel och fel. För längre texter är det otroligt jobbigt att läsa så bred text, satsa hellre på att krympa ner än att öka upp blockstorleken om ni vet att mycket text kommer publiceras i blocket.

Typografiska regler på webben är som sagt fortfarande ganska nytt, bestritt och ingenting som egentligen är huggit i sten, men det finns ändå en del tankar som man kan kalla för “best praxis”.

Textstorlek*30+100=kolumnbredd

Tekniken består i att ta din text-storlek och multiplicera den med 30. Det vill säga: 12*30 =  360px. Du kommer säkert hamna på ett snitt av 60-65 bokstäver per rad och allt är väl. Men, dagens skärmar och upplösningar låter oss tänja lite på denna regeln. Metoden kommer ursprungligen från Robert Bringhurst men jag tycker inte den riktigt kan anpassa mot webb.

Vad jag anser så fungerar det lika bra att slänga till ~100px extra, främst eftersom man kan infoga lite mer intressanta bilder och väga upp “god typografi” på annat sätt. Tänk ändå på att hålla intervallen ca 40 till ca 80 tecken på en rad.

En självklarhet tycker vissa medans andra undrar varför man ens ska bry sig om fallback i sin webb-typografi. Men med den nya vågen webbläsare som Opera 10, Chrome 2, Firefox 3.5 (safari har stöd redan innan version 4) så introduceras CSS-elementet @font-face på en bredare front.

Min känsla berättar att från start kommer detta brukas vilt och mycket över webben. Jag kan inte dölja att suget finns hos mig också, men man får fortfarande tänka efter. Varför jag tar upp det nu är främst eftersom Opera har lågt användarantal, Safari och Chrome likaså. Det är först när Firefox utökar sitt stöd som man kan räkna med elementet på ett helt annat plan.

@font-face är ett CSS3 element vilket gör att du kan länka till ett typsnitt och få användaren att se samma sak som du ser – även om typsnittet inte är installerat. Många tycker att detta är slutet för web-safe fonts, men man får aldrig glömma att definera alternativa typsnitt för de som inte kan, vill eller behöver se det du bestämmer. Jag tänker främst på äldre versioner av webbläsare, funktioner för att stänga av nerladdningen av typsnittet eller personer med tillgänglighetssvårigheter.

Ett problem återstår ändå, Internet Explorer stödjer enbart ett alternativt format och inte .ttf eller .odt som de andra.

Enda sättet att lösa detta på är att alltid definiera webbsäkra typsnitt efter det typsnittet du valt. Detta löser du som vanligt med CSS.

Jag tror alla har gått igenom sin Comic Sans fas i livet – främst de, liksom jag, som började i slutet av nittio-talet, jag gillade lime-grön Comic Sans mot svart bakgrund de första sidorna jag gjorde i Frontpage Express -96. Men de som lämnar typsnittet verkar göra det för gott – på både gott och ont.

Comic sans uppfanns 1994 lagom till lanseringen av Windows 95 och ingår idag i kategorin core fonts, vilket betyder att den finns på de flesta datorer, detta kan utnyttjas i de få tillfällen det kan användas.

När kan Comic Sans användas?

Funktionellt sett så kan man säga att; så fort du designar för en målgrupp med dyslexi så ska typsnittet finnas som alternativ. Dyslektiker vill gärna ha bokstäver med luft, egenhet för varje bokstav och något som ser till att ordbilden blir någorlunda unik. Det är svårt att sätta det snyggt för den “vanlige personen” men oftast är det som fungerar bäst för personer som har problem med ord.

Myndigheter är väldigt dåliga på att se till dessa behoven, det är ändå cirka 4-6% som beräknas lida av det i Sverige. De myndigheterna (skatteverket, försäkringskassan, riksdagen, regeringen, socialstyrelsen) jag har kollat in så har ingen Comic Sans som alternativ – även om den lättlästa texten i viss utsträckning hjälper på samma sätt.

Det som inte är sagt är att inte allt beror på typsnitt. Radavstånd, storlek och kontrast har mycket att göra med hur bra det kommer fungera. Likaså det språk som används på webbplatsen.

Har du funderat på användningen någon gång? Eller till och med använt Comic Sans? Berätta gärna.

Läckande rubriker

Två exempel på rubriker

Läckande rubriker är något som de flesta redigerare är mycket väl medvetna om men är  något som jag har sett att många webbdesigners och bloggare inte tänker på. En rubrik ska vara närmare den texten den hör till.

Ta bilden ovan, rubriken till vänster ser ut att flyta runt i ingen-mans-land vilket förstör helheten till texten som hör till. Flyttas rubriken ner som i det högra exemplet så skapar man helt plötsligt en helhet.

Lösningen är att minska padding och margin nedåt på dina rubriknivåer.

Färgen på texten

#000 vs #333

Att sätta färg på sin text är ofta lockande. Speciellt om man vill förtydliga något extra. När man sätter färg måste man hela tiden tänka på kontrast till bakgrund och andra element. Om texten som är färgad blir för stark så sätts helt plötsligt allt fokus till den delen och resten av informationen försvinner.

Färg på löpande text bör inte sättas till absolut svart. Typografi rekommenderar kontrast, så även på webben – #333 är en bra färg för bra kontrast mot vitt.

Avstånd mellan raderna

Bra radavstånd mot orginalavstånd

Ofta när det handlar om längre texter så kan jag inte längre hålla kvar mitt fokus på grund av att texten försvinner in i ett virr-varr. Radavståndet spelar stor roll när det handlar om längre texter. Att sätta för litet radavstånd till förhållande till textstorleken kan ha förödande konsekvenser. Praxis på webben nu för tiden brukar vara ca 140% radavstånd mot teckenstorleken, 10 teckenstorlek till 14 radavstånd och så vidare.

Sätter du line-height: 140%; på din brödtext är du oftast garderad mot problemet.

Fler videos

V för Vendetta

Full Metal Jacket

Snatch

Forrest Gump

Finns många fler under sökordet type animation på youtube.

Flera versaler efter varandra i löpande text blir ofta påträngande […]. Det kan avhjälpas genom att man sätter versalerna en punkt mindre än den övriga texten och spärrar dem lite […].

För det första är denna koden ganska generell och det reguljära uttrycket är på inget sätt optimerat då mina kunskaper inom det fortfarande är ganska låga, det finns säkert en smartare sträng som löser uppgiften.
Först antar vi att din text är i en string:
[code language="php"]$str = "Hej en förkortning kan se ut som detta CSS eller HTML-kod samt PHP";

Sen behöver vi reguljära uttryck och en replace på de förkortningar som finns:
[code language="php"]$pattern = array(
"/s([A-Z][A-Z0-9]{2,})s/",
"/s([A-Z][A-Z0-9]{2,}+)/"
);
$replace = array(
" $1 ",
" $1"
);
$str = preg_replace( $pattern, $replace, $str);

Detta byter ut alla förekomster av förkortningar med tre tecken eller mer i den löpande texten. Att vi har två reguljära uttryck är eftersom en förkortning kan finns som ensamstående, HTML, eller som del av ett ord, HTML-koden.

Det som är kvar är att sätta en stilmall på den nya layouten:
[code language="css"]abbr {
letter-spacing: 0.1em;
font-variant: small-caps;
font-size: 11px;
}

Att vi väljer dessa regler är ganska enkelt. En förkortning ska enligt Hellmark spärras med ungefär 10%, alltså blir det 0.1em. Istället för att använda versaler som ser konstigt ut så kan man istället använda kapitäler som har samma x-höjd som resterande text. Det kan också vara en bra idé att minska textstorleken med 1pixel (eller punkt i print) för att linjera texten ytterligare.

Sammanfattning

[code language="php"]$str = "Hej en förkortning kan se ut som detta CSS eller HTML-kod samt PHP";
$pattern = array(
"/s([A-Z][A-Z0-9]{2,})s/",
"/s([A-Z][A-Z0-9]{2,}+)/"
);
$replace = array(
" $1 ",
" $1"
);
$str = preg_replace( $pattern, $replace, $str);

Och CSS:
[code language="css"]
abbr {
letter-spacing: 0.1em;
font-variant: small-caps;
font-size: 11px;
}