Embed Size (px)
DESCRIPTION
Rubrikformatmall, styckeformatmall eller teckenformatmall? Vad innebär detta? När ska man använda sig av vilken typ? Ibland räcker inte standardtypsnitten till - hur gör man då? Vi går gemensamt igenom hur du lägger till en Google webfont på din webbplats. Använd en formatmall för dina ikoner! Istället för att använda en bildmodul med en ikon används textmodulen med ett tecken med formatmallen. En fördel är att sidan blir snabbare att ladda samt att formatmallen är vektorbaserad, så ikonerna blir skalbara. Det kan vara egna ikoner eller exempelvis Bootstrap Glyphicons.
Citation preview
Påverka dina formatmallar
2
Påverka dina formatmallar
Typsnitt är viktiga! ● Hög igenkänningsfaktor
● Påverkar läsbarhet
● Förmedlar känsla
Svd.se med annat typsnitt
Påverka dina formatmallar
Typsnitt● Inställningar● Google webfonts● Egna ikontypsnitt
Påverka dina formatmallar
Öka storleken!
ARIAL 12 px ARIAL 16 px
Egenskaper på formatmall, Storlek
Påverka dina formatmallar
Öka radavståndet!
RADAVSTÅND NORMAL RADAVSTÅND 150%
Egenskaper på formatmall, Radavstånd
Resultat!
Radavstånd: Normal, Storlek: 12 px
Radavstånd: 150%, Storlek: 16 px
Rubrik-, Stycke- & Teckenformatmall
Google webfonts
Surfa till: ● https://www.google.com/fonts
Tänk på:● Att typsnittet innehåller de specialtecken du
behöver (Preview text)● Laddtiden ökar ju fler styles du lägger till
(light, normal, medium, bold osv) – ta bara med de som du behöver.
Google webfonts
Gör så här:
1. Hitta det typsnitt du vill använda till din webbplats. Klicka på knappen "Quick use".
2. Välj vilka varianter/styles du vill ha med i CSS-filen. Scrolla ner en bit hittar du koden som ska läggas in på din webbplats:http://fonts.googleapis.com/css?family=Dosis:200,300,500,800
3. Gå till webbplatsens egenskaper och klicka på Allmänt, fliken ”Tillägg i <HEAD>
4. Klicka på plusknappen för att lägga till en CSS-fil som du döper till vad du vill.
5. Som CSS-källa lägger du till en ”Extern källa” där adressen är:http://fonts.googleapis.com/css?family=Dosis:200,300,500,800
6. Klart! Det enda du behöver göra för att använda ditt nya typsnitt är att skapa en ny formatmall eller gå in och ändra en befintlig.
I raden skriver du bara in namnet på det typsnitt som du har importerat, i mitt fall Dosis och sätter storlek på typsnittet.
Egna ikontypsnitt
Egna ikoner eller köp, exempelvis på http://glyphicons.com
Jag brukar behöva lägga till 4 olika format:
● TTF - TrueType som stöds av Firefox, Chrome, Safari och Opera● WOFF - Web Open Font Format, accepteras av de senaste
versionerna av alla stora webbläsare.● EOT – Embedded Open Type, standardformatm för IE, särskilt äldre
versioner av IE ● SVG – Scalable Vector Graphics, som stöds av Chrome, Safari och
Opera.
Tips! http://caniuse.com
Egna ikontypsnitt
Gör så här:
1. Gå till filarkiv och ladda upp de 4 olika filerna.
2. Markera filerna och kopiera länkadresserna till de olika filerna:/download/18.1xxx/xxx/sv-font1.eot
3. Skapa tillägg i head. Avancerat, css, kör i redigeringsläget
@font-face { font-family: myicons'; src: url('/download/18.1xxx/xxx/sv-font1.eot'); /* IE9 Compat Modes */ src: url('/download/18.1xxx/xxx/sv-font1.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/download/18.1xxx/xxx/sv-font1.woff') format('woff'), /* Modern Browsers */ url('/download/18.1xxx/xxx/sv-font1.ttf') format('truetype'), /* Safari, Android, iOS */ url('/images/18.1xxx/xxx/sv-font1.svg#svg myicons') format('svg'); /* Legacy iOS */}
4. Skapa en teckenformatmall, ej understrukna länkar med namn myicons.
Klart! Tips! Vill du ha en större ikon: font-size:400%
Summering
Typsnitten på din webbplats är viktiga, de påverkar både hur din webbplats uppfattas och gör den mer personlig!
Att välja rätt typsnitt till din webbplats kan kan göra stor skillnad både för läsbarhet och den grafiska designen. Men det är också andra saker som påverkar din formatmall SOM storlek, radavstånd, rubriker, teckenformatmallar för att markera vissa ord.
