Generelt så gäller följande regel: 1em = 12pt = 16px = 100%.

px

Den lättaste lösningen är att kopiera samma teckenstorlek som förlagan i Photoshop (är teckenstorleken 12 pt så motsvarar det 16 px i vår CSS (vi skriver aldrig pt i CSS, men om det senare)). Men detta har visat sig dåligt då användaren inte kan använda textförstoring i webbläsaren utan måste zooma in hela webbsidan.

Att skriva teckenstorleken i px är det absolut bästa sättet om man vill vara riktigt pixelexakt med sin design utifrån förlagan. 12 px är helt enkelt 12 pixlar.

Text som är satt till 12px med CSS är 12 pixlar hög.

Att sätta text med pixlar har som sagt ett rätt dåligt rykte bland webbutvecklare och tillgänglighetsexperter då text som angets i pixlar inte kan skalas upp/zoomas av besökare som använder IE6 eller tidigare. Inte ens i nyare versioner av Internet Explorer fungerar detta, men då finns det i alla fall en zoom-funktion i Internet Explorer som tillåter att användaren zoomar in ALLT innehåll på sidan. Det kan vara värt att tänka på, även om dina 20-någonting-ögon kan läsa text satt till 12px så är det inte alls säkert att dina besökare kan det.

Hur var det med pt nu då?

Jo, pt, eller punkter, är bara för print-stil! Detta är viktigt att komma ihåg. pt kommer skala bra för storlek när man skriver ut, men måtten på ett papper (dpi, dots per inch) är inte alls samma sak som måtten på en skärm (ppi, pixels per inch). Det är helt enkelt fel att använda pt på webben. Så vi går inte in djupare på det, kom bara ihåg; använd det inte.

EM

EM är ett gammalt begrepp från tryckvärlden där ett M angav en full höjd och bredd på typsnittens tecken. Att använda em är kanske det knepigaste sättet i CSS då EM ärver stil från sina föräldrar. Så till exempel; om vi inte har deklarerat en typsnittsstorlek för vårt HTML-dokument så kommer det att vara webbläsarens standard (16px) och då är 1em = 16px. Skulle vi sätta body{font-size:12px;} så skulle 1em = 12px, 2em = 24px och 0.5em = 6px.

Det här med att EM ärver storleken från sin förälder blir lite svårt att hålla reda på om man har en djup struktur i sin CSS. Om man har en liknande struktur för t.ex. ett blogginlägg:

<article>
    <header>
        <hgroup>
            <h1>Titel</h1>
            <h2>Undertitel</h2>
        </hgroup>
        <div>
            <p>Publicerat den …</p>
        </div>
    </header>
    <div>
        <!-- Innehåll … -->
    </div>
</article>

Nu vill vi sätta större text på våra rubriker och mindre text på vår meta-information när inlägget har publicerats. Skriver vi då header { font-size: 2em; } och sen header div { font-size: .5em; } så kommer vår metainformation bli halva storleken av förälderns element (dvs motsvarigheten till 1em). Alltså inte alls vad vi egentligen ville. Så här gäller det att hålla tungan rätt i mun.

EM kan även användas som en generell måttenhet, så det går utmärkt att skriva t.ex. margin: 2em 0;. För att enkelt komma ihåg textstorlekarna och kunna översätta Photoshop till CSS så brukar man ange html { font-size: 62.5%; } i sin reset så att 1em = 10px. Då kan man enkelt skriva 1.6em för att få text som är 16px stor (t.ex.).

%

Procent beter sig ungefär som EM och skalar tillsammans med förälderns element. Jag har läst att procent skalar annorlunda när man använder font-size: smallest eller font-size: largest och liknande, men jag har själv inte lyckats återskapa problemet. Det kan vara ett Internet Explorer-problem (som så mycket annat ;)). Men använder du inte den typen av deklarationer kan du använda % eller EM, helt beroende på vad du själv tycker är enklast.

REM

REM, eller Root EM, är en hyffsat ny måttenhet som kom med CSS3 och beter sig som EM, men med den stora skillnaden att den inte bryr sig om sin förälder. Med Root så menas den att den bara bryr sig om dokumentets root, alltså HTML-deklarationen som styr teckenstorleken. Så har man angett html { font-size: 62.5%; } i sin CSS så är 1.2rem samma sak som 12px, oavsett vad det omslutande elementet har. Sweet!

Men; hur ser det ut med bakåtkompabilitet för REM då?

Jo, tyvärr så är det rätt så kasst–men det finns ljuspunkter. Minns ni vad jag skrev om att inte ens nya versioner av Internet Explorer klarar av att skala text utan att zooma hela webbsidan? Ta-daa; från och med Internet Explorer 9 och uppåt klarar man det, men bara med REM. Dock så har inte versioner tidigare än Internet Explorer 9 någon som helst aning om vad REM är så då måste vi lägga in en fallback i vår kod. Men ändå, att skriva en fallback är ett litet pris att betala för att slippa slita sitt hår varje gång man vill ta vara på användarvänlighet och enkelt kunna räkna ut teckenstorleken.

p {
    font-size: 12px; // Fallback för IE8 och tidigare
    font-size: 1.2rem; // Alla andra vettiga webbläsare
}

Slutsats

Vill du enkelt kunna ange rätt teckenstorlek utan att bli galen på vägen samtidigt som du försöker omfamna användarvänliga utvecklingsmetoder så använd REM med fallback som px.

Vad tror du kommer att bli nästa stora grej på webben? Håller du med om bildens prognos för framtiden?

Jag har svårt att hitta egna ord för den här svenska dokumentärfilmen mer än att jag tycker ni borde se den, om ni nu mot förmodan har missat denna inspurerande och tänkvärda film. Så här lyder filmbeskrivningen enligt dom själva:

The digital revolution of the last decade has unleashed creativity and talent in an unprecedented way, with unlimited opportunities. But does democratized culture mean better art or is true talent instead drowned out? This is the question addressed by PressPausePlay, a documentary film containing interviews with some of the world’s most influential creators of the digital era.

There is no formal training for what is going on in the professional world right now.
— Tracy Chandler, Shilo

Ladda ner, eller köp filmen på presspauseplay.com.

Min första riktiga kärlek var hiphop och det är dit jag hittat tillbaka nu. I snart 10 år har jag nästan uteslutande lyssnat på reggae och dancehall, så det känns faktiskt riktigt bra att fasta i hiphopträsket igen. Action Bronson (@ActionBronson) är en New York-rappare från Queens som dessutom är kock (!) och levererar med en stor del humor i sina texter. Han påminner väldigt mycket om Wu-Tang Clans Ghostface Killah (förutom att han är vit och överviktig). Om ni gillar hans grejer så köp hans album, Dr Lecter, nyss!

Jag är nästan sugen att slänga på mig min East Pack-ryggsäck, mina Academics-jeans och Timberland-skor igen.

Action Bronson – Shiraz

Nu sitter jag mest och fantiserar längtar efter en iPhone5 (eller åtminstånde en iPhone 4Gs). Min 3Gs börjar som sagt kännas ganska slö. Jag tycker nästan synd om Steve Jobs när han presenterar världens första iPhone 3G i videon nedan, när han med all säkerhet redan har en 3Gs i fickan, men tyvärr inte kan börja sälja den på grund av för dyr tillverkning av delar (eller vad det nu kunde vara). Garanterat var dom i stort sätt klara med en 3Gs när dom lanserade iPhone 3G. Men det är så stora företag som Apple lyckats bli så stora, man klarar av att släppa produkter trots att man är såå nära en lite bättre version. Jag läste en mening som jag tycker är så bra – ”if you’re not embarrassed when you ship your first version you waited too long”, och det ligger mycket i det.

Eller så kan man förenkla det så här:

Real artists ship.
— Steve Jobs, 1983

Del ett:

Del två:

Sven-Arne Paulsson

Nu har det gått precis ett år sedan du gick bort i cancer. Det var strax efter din 60 årsfest som vi upptäckte din hjärntumör och sedan gick det ett halvår innan du var borta. Det var det snabbaste halvåret jag upplevt.

Det gick fort, men ändå inte så fort som det skulle kunnat ha gått. Du skulle till exempel ha kunnat gått bort av någon helt annan orsak, en trafikolycka kanske. Jag är glad över att vi fick det sista halvåret tillsammans och fick prata med varandra och inom familjen. Det kändes fint.

Jag vet att du kände lite ångest över att du reste mycket när jag var liten pappa, men om du läser det här så ska du veta att det gör ingenting. Du var alltid min hjälte och jag har alltid pratat om dig med stolthet. Jag visste att du hade ett viktigt jobb, och det gjorde mig stolt. Jag ville bli precis som dig.

Det känns lite absurt att tala om det, men ändå bra på något vis. Jag saknar dig pappa och jag är ledsen över att du inte kommer att få uppleva mina barn och att dom aldrig kommer få träffa dig. Jag önskar att du kunde närvara på mitt bröllop. Att du finns till hands när det är något krågligt som måste lösas. Du kunde alltid lösa allt krångligt.

Bara så att du vet pappa; jag saknar dig. Jag älskar dig.

Barnbarnen viftar kring benen
‐ som smultron på ett strå ‐
de tänder min kärlek, den sista,
lika häftig som då

Idag åkte jag tåg fram och tillbaka till Ludvika och fick då möjligheten att gå igenom min Google Reader. Bland inläggen hittade jag in på Jonas Larssons (@bybalsam) blogg youmewe.se och den här fantastiskt inspirerande videon på Ji Lee (som har jobbat på bl a Saatchi & Saatchi, Google och Facebook).

Ji pratar om hur viktigt det är att ha privata projekt och hur dessa kan påverka dig proffesionellt. Har du en stund över; titta på den här presentationen!

How personal projects make me happy and lead to jobs I love.

Sjövild kommer bli som ett litet svenskt Facebook, fast med inriktning på båtlivet och båtar. En plats för båtintresserade att prata om just livet på sjön med varandra. Just nu pågår utvecklingen av sidan, men det går bra att skriva upp dig på en intresselista så kommer jag att skicka ut inbjudningar till beta-versionen av sidan så snart jag har den öppen för allmänheten. Så anmäl ditt intresse nu!

Namnet Sjövild kommer från vår kära pappas båt som var med i familjen under många år.

Följ gärna @sjovildse på Twitter också för säkerhets skull.

För ett tag sedan gjorde jag om wpkod.se till en nyare och bättre design än den förra. Nu har jag tagit mig tid och gjort en variant på det temat till WordPress som jag nu släpper fritt för nerladdning. Varsågod!

Temat är på engelska, men är uppbyggt för att hantera språkfiler så man kan få det på svenska om man vill. Jag har dock inte skapat några språkfiler ännu utan tanken är att det ska komma vid en uppdatering av temat så snart jag hinner tillsammans med lite custom widgets. Det är tanken i alla fall. Tycker du om att skapa .mo- & .po-filer så får du hemskt gärna översätta temat ;)

Temat laddar jQuery 1.6 från Google samt Selectivizr. Typsnitten som används är Pacifico, Droid Serif och Helvetica Neue (eller Helvetica > Arial om det saknas). Det är färdigt med Facebook meta-taggar och är allmänt välkommenterat för er som vill göra ändringar.

Här kan du kliva in och klicka runt i temat →

English

This is a free WordPress theme based on the design for wpkod.se. This theme is in English, but comes compatible for language files for whoever wants to translate the theme.

It loads jQuery 1.6 from Google’s CDN and comes with Selectivizr. Fonts used are Pacifico, Droid Serif and Helvetica Neue (with Helvetica > Arial as fallback). The theme also generates appropriate Facebook share tags by default. And the code is well commented for those of you who wish to make alterations. Enjoy :)

Feel free to poke around in the theme here →

Ladda ner / Download

Ladda ner Chiffer här / Download Chiffer here →

Updates

19 Maj 2011 – Version 1.0
First Release

Flattr