Blueprint är ett projekt på Google Code som är släppt som öppen källkod under MIT licens. Det är en uppsättning CSS-mallar som skapar en smidig grund att bygga din CSS-design ovanpå. Efter en snabb koll tycker jag det ser riktigt bra och man har lagt fokus på att följa webbstandarder och tabell-lös design.
Intressant att notera är demosajtens bredd (skärmdump här ovan) som är exakt 960px bred. Det ger en ytterligare bekräftelse att detta börja bli ett slags standardmått, nu när fler och fler användare sitter på 1024-skärmar. Läs gärna vår tidigare artikel som handlar om att designa webbsidor med 960px bredd och rutnät. Kan tänka mig att dessa ideer har inspirerat folket bakom Blueprint.
Något annat värt att notera i Blueprint-projektet är att man har möjlighet att placera textraderna i jämna rader vertikalt. Tidigare länk på detta ämne finns hos oss, här.
Blueprint verkar alltså vara ett riktigt intressant projekt värt att kolla närmare på, för alla som vill ha en bra grund till CSS-design och ger ett bra rutnät, mall för utskrift och typografi-regler.
Hittade just Mark Boulton's blogg som skriver en hel del läsvärt om typografi och webbdesign. Inlägget om hur man kan få en snygg vertikal rytm i textstycken är riktigt intressant.
De typsnitt som man kan använda för html-text på webben är ju minst sagt begränsade, det känns ofta som man designar för kantig text-tv. Om du vill se en sammanfattning på de vanligaste kolla in på ett tidigare inlägg om webbsäkra fonter.
Problemet är ju att det finns olika operativsystem som t ex Windows, OS X och Linux. Det gäller alltså att välja de typsnitt som finns tillgängliga på alla, för att få en enhetlig design oavsett system.
Eftersom Windows länge har varit vanligast och antagligen kommer vara det ett bra tag till, så har deras fontsamlingar länge styrt vad man kan välja. I och med lanseringen av Vista har Microsoft utvecklat en serie nya typsnitt, speciellt anpassade för att vara lättläsliga på skärmar.
Lite lustigt är det att alla börjar på bokstaven C. Det var säkert en smart utveckare som tänkte att de är perfekt att ha alla de nya samlade på samma ställe i typsnittslistan. Nykomlingarna är: Calibri, Cambria, Candara, Consolas, Constantia och Corbel.
Läs mer hos media:screen där jag såg det först. Mer info och bildexempel av typsnitten finns på Modern Life och Poynter.
Tyvärr kommer det väl dröja ett tag innan man kan börja använda dem i produktion, de måste ju bli väl spridda först. Men lita på att de kommer bli vanliga, och att vi kommer se dem överallt under många år. Ända tills nästa version av Windows kan man tänka sig.
456 Berea Street är verkligen en fantastisk resurs för webbutveckling. Det finns dock så mycket information så det börjar bli svårt att hitta. Tänkte nu spara en länk till en sida om kvalitativa typsnitt som jag finner mig återvända till rätt ofta.
Där länkar man vidare till två samlingar, 25 Best Free Quality Fonts och 19 More Free Quality Fonts. De flesta fonterna är helt fria att använda men vissa får endast envändas i privata projekt och ej i kommersiellt syfte. Se till att du läser igenom rättigheterna ordentligt.
Så, nu behöver jag inte leta upp den där länken igen..
Jag har tidigare skrivit om vilka typsnitt som är säkra att använda på webben om man vill ha samma resultat på alla olika system. Nu tänkte förklara lite om hur man anger storleken på typsnittet. I CSS har man följande storlekar att välja bland.
* px - pixels, bildskärmspunkter * pt - points, typografiska punkter * pc - picas, typografiska "punkter" * mm - millimeter * cm - centimeter * in - inches, tum * em - typografisk fyrkant * ex - x-höjd
Glöm punkter på skärmar För det första, glöm bort att visa typsnitt i punkter eller picas. Folk är vana vid att arbeta med punkter i program som Word och Photoshop, och sedan felaktigt använt det för att beskriva textstorlekar på webben. Dessa bör inte användas för skärmvisning. Centimeter, Millimeter och Tum bör också undvikas. Den enda gång man ska ange storlek i punkter är i separata stilmappar för sidor som ska skrivas ut på en skrivare.
Fasta enheter cm - centimeter mm - millimeter in - tum - 1in = 2.54 cm pc - picas - 1pc = 12 pt pt - punkter - 1pt=0.353 mm
Pixlar eller em? Pixlar är ju den naturliga enheten på skärmar och lämpar sig väldigt bra. När det gäller typsnitt har det länge vart populärt att ange storleken i pixlar. Oftast vill designers ha lite mindre text och väljer något mellan 9-11 pixlar på brödtexten. En nackdel med detta är att i vissa webbläsare går det då inte att ändra storleken genom inställningarna (t ex IE6).
Relativa storlekar är bästa valet Fler och fler webbplatser inser nu fördelarna med att ange typsnittstorlekarna i em eller % istället för i fasta pixlar. Vad betyder då em? Den typografiska fyrkanten är olika stor beroende på vilket teckensnitt man använder. Den utgår nämligen från bokstaven M i valt teckensnitt. Detta innebär alltså att måttet em varken är beroende av skärmens upplösning eller vilket operativsystem man använder. Det som styr är i stället besökarens egna inställningar för teckenstorleken.
Ett exempel I följande exempel visas all text i 75% av användarens standardinställning. Radhöjden är 133% för att få in lite luft mellan raderna. Rubriken h3 visas i 200% i relation till det värde vi angett i body.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; } h3 {font-size:2em;}
När man gör html design och anger vilka typsnitt man vill använda brukar man ange några olika alternativ. Alla plattformar som PC, Mac, Linux och Unix har ju alla olika standardfonter installerade. Man anger fonter i CSS enligt följande. Sans-serif är ett generellt samlingsnamn för att ett typsnitt utan "fötter" ska väljas.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; }
Om man vill att samma font ska visas för alla besökare blir man väldigt begränsad. Hittade en sida på nätet som skriver att de följande är de vanligaste webb-säkra fonterna.
* Arial / Helvetica * Times New Roman / Times * Courier New / Courier
Andra alternativ som brukar fungera bra är:
* Palatino * Garamond * Bookman * Avant Garde
Några fonter som fungerar bra på Windows and MacOS men inte Unix+X är:
* Verdana * Georgia * Comic Sans MS * Trebuchet MS * Arial Black * Impact
