Typsnitt / Fonter

Så funkar FitText och Responsive text

Responsive design har ju alla förhoppningsvis hört talas om men responsive text är inte lika omtalat. Krasst kan man säga att beskrivningen av responsive text är för tillfället väldigt luddig. Är det text som växer och krymper i storlek eller är det textstycken som försvinner beroende på skärmens storlek? Hur som haver så lever båda lösningarna idag även om de fortfarande befinner sig i sin linda.

Responsive text

Lösningen responsive text av Frankie Roberto bygger på att skala bort stycken i en text beroende på skärmupplösning. Detta åstadkommer han med enklare HTML-klasser och CSS-magi. Personligen tycker jag att detta är en riktigt trevlig funktion, dock så finns det allmänna haters som undrar om vitsen med denna funktion. Vitsen som jag ser det är att vi har olika beteenden på olika enheter, att läsa genom en lång text i telefonen är inget at föredra. Jag vill ha kort och koncis fakta. Sitter jag däremot framför en skärm så är förutsättningarna annorlunda.

Självklart dyker det upp lite nya utmaningar med detta, som t.ex. att skribenterna måste tänka på hur texten skalas ner för att det inte skall bli konstigt i mindre upplösningar.

responsive-text-L

Fullskalig text

responsive-text-S

Nedskalad text

FitText

FitText är en lösning framtagen av Dave Rupert som skalar texten ifråga med hjälp av lite javascript. Den anpassar storleken på texten/fonten beroende på webbläsarens storlek. Lösningen bör endast användas på större rubriker och inte på brödtext då texten blir oläsbar på t.ex. små skärmar. Enkel att implementara och rolig att leka med.

FitText

Svår att visa. Gå till sidan istället.

Självklart går denna jQuery-lösning att ladda ned på GitHub.

Tre grymma tjänster för fonter/typsnitt

Ibland så hittar man bra tjänster som man helt enkelt vill dela med sig av. Här kommer tre stycken som jag stött på och ofta använder när jag jobbar med olika webbplatser. Testa, njut och bokmärk!

DaFont

Har du svårt att hitta snygga och kostnadsfria fonter? Då är detta webbplatsen för dig. På DaFont hittar du hundratals (kanske till och med tusentals) kostnadsfria fonter, kategoriserade och uppdelade på datum och alfabetisk ordning.

dafont

WhatTheFont

Ibland så hittar man en font på nätet eller någon tidning och tänker, jisses vilken snygg, undra vilken det är. Med WhatTheFont är det enkelt att ta reda på det. Använd deras app eller webbplats för att göra ett uppslag mot deras gigantiska typsnittsdatabas och få reda på vilken font  som används.

whatthefont

TypeTester

Denna tjänst är gryyyym för designers när man utvecklar webbplatser. På Typetester så jämför man enkelt olika fonter (med tillhörande variabler) mot varandra för att få en känsla för.. ja fonten. Jag fick en tår i ögat när jag upptäckte tjänsten och som grädde på moset så får du självklart ut en CSS från dina experiment.

typetester

Skugga dina fonter och öka läsbarheten

Det här med fonter/typsnitt är alltid kul och som jag skrivit om tidigare så finns det idag mycket större möjligheter till att använda fler fonter än systemets egna. Dock skapar det även problem. Olika läsare och operativ system har en tendens till att rendera ut fonterna på olika sätt vilket kan skapa pixliga kanter och leder till sämre läsbarhet. Vad exakt det beror på diskuteras fortfarande vilt.

pixliga fonter

Olika läsare och operativsystem renderar ut olika resultat

Behöver vi verkligen offra läsbarheten?

Nej, det finns en lösning på detta. Du behöver inte leva med dålig läsbarhet bara för att du vill använda dig av roligare fonter. Lösningen är måhända inte den snyggast med den funkar bra. Enda som du behöver göra är att lägga till en pixels skugga på texten i CSS:en för att skapa smidigare fonter och bättre läsbarhet.

fonter med skugga

Det är inte magi, det är CSS.

Hur gör du detta i CSS:en? Jo, såhär:

h1 { /* Your selector */
      	font-family:"Some Custom Font", serif;
        text-shadow:0 0 1px transparent;
        /* Or, if you need to apply a 0px hard shadow,
         * you can use multiple text shadows */
        text-shadow:0 0 0 #f00, 0 0 1px transparent;
      }

 

Det kommer självklart att komma lösningar på detta i framtiden som gör att man kommer att slippa detta specialfix. IE9 visar (ryktesvis) på en mycket bättre hantering av fonter och font-smoothing i CSS3 kommer att vara ett alternativ också. Men fram tills dess så testa gärna ovanstående skugglösning.

Tack till David Legget för detta.

Ut med Cufon & SIFR, in med @font-face. Äntligen!

font face

Äntligen! Med @font-face slipper du allt trassel som har med typsnitt på webbplatser att göra. Säg farväl till Cufon och SIFR. Inga fler begränsningar till systemfonter och halvdana fontersättare. Med @font-face så kan du styra vilka fonter som skall visas direkt från CSSen (precis som vanligt) men du kan desutom ladda upp valfri TrueType eller OpenType font på servern och använda dig av på webbplatsen (TTP och OTP är typsnittsformat).  Fördelen, förutom det väldiga spektra av fonter du kan välja bland, är att det inte blir några “glitchar” som det kan bli med Cufon eller SIFR utan typsnittet laddas direkt. Underbart!

Vart kan du då hitta rätt format?

Font Squirrel kan du till exempel både hitta licensbefriade typsnitt att ladda ner men det går även bra att konvertera typsnitt som du eventuellt har liggandes på datorn med hjälp av deras @font-face generator. Där finns även enklare guider på hur du lägger in de i CSSen.

Sitter du och jobbar med WordPress så finns pluginet AnyFont som hjälper till att importera och byta ut fonter.

Gratis! Tio snygga & användbara typsnitt för webb och print

Vi alla törstar med jämna mellanrum efter riktigt snygga typsnitt. Ett vackert typsnitt kan inte bara ta något mediokert och halvhjärtat och förvandla det till en vacker svan men det har även förmågan att förstärka samt förädla budskap. Tyvärr är det ofta så att snygga typsnitt inte är  gratis. I värsta fall kan du få hosta upp ett antal tusenlappar för att få loss en hel familj, vilket kan svida i plånboken om du bara vill göra lite tester.

Därför tänkte jag nu bjuda på lite snygga och kostnadsfria typsnitt som jag sprungit på under senare tid. Dessa uttrycksfulla typsnitt har designats för att både fungera både på webb såväl som för print. Rekommenderar inte att använda de i brödtext utan snarare för att lyfta fram en rubrik, slogan eller bara för att göra en snygg design. Personligen tycker jag att de är ruskigt fina med sina polerade geometriska former och mjuka ytor. Varsågod!

Alt Retro

Alt-Retro

Null

Null

Matilde

Matilde

Matchbook

Matchbook

HERO

HERO

Gota

Gota

Gardens C

Gardens-C

Cubesity

Cubesity

Coldi

Coldi

Cabin Font

Cabin-Font

 

 Scroll to top