ݺߣ

ݺߣShare a Scribd company logo

Påverka dina formatmallar - SiteVisiondagarna 2014

•
•
SiteVision AB
SiteVision AB

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 vektor­baserad, så ikonerna blir skalbara. Det kan vara egna ikoner eller exempelvis Bootstrap Glyphicons.

1 of 21
Download to read offline
Påverka dina formatmallar - SiteVisiondagarna 2014
Påverka dina formatmallar 2
Påverka dina formatmallar - SiteVisiondagarna 2014
Påverka dina formatmallar - SiteVisiondagarna 2014
Påverka dina formatmallar - SiteVisiondagarna 2014
Påverka dina formatmallar - SiteVisiondagarna 2014
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
Ulrika Sandberg Supportchef & mallbyggare 019-17 30 37 ulrika.sandberg@sitevision.se
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, 鲹岹åԻ
Resultat! 鲹岹åԻ: Normal, Storlek: 12 px 鲹岹åԻ: 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(/slideshow/pverka-dina-formatmallar-sitevisiondagarna-2014/40297691/&); /* IE9 Compat Modes */ src: url(/slideshow/pverka-dina-formatmallar-sitevisiondagarna-2014/40297691/&) 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.

More Related Content

Påverka dina formatmallar - SiteVisiondagarna 2014

  • 7. Påverka dina formatmallar Typsnitt är viktiga! ● Hög igenkänningsfaktor ● Påverkar läsbarhet ● Förmedlar känsla
  • 8. Svd.se med annat typsnitt
  • 9. Påverka dina formatmallar Typsnitt ● Inställningar ● Google webfonts ● Egna ikontypsnitt
  • 10. Ulrika Sandberg Supportchef & mallbyggare 019-17 30 37 ulrika.sandberg@sitevision.se
  • 11. Påverka dina formatmallar Öka storleken! ARIAL 12 px ARIAL 16 px
  • 13. Påverka dina formatmallar Öka radavståndet! RADAVSTÅND NORMAL RADAVSTÅND 150%
  • 15. Resultat! 鲹岹åԻ: Normal, Storlek: 12 px 鲹岹åԻ: 150%, Storlek: 16 px
  • 16. Rubrik-, Stycke- & Teckenformatmall
  • 17. 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.
  • 18. 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.
  • 19. 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
  • 20. 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(/slideshow/pverka-dina-formatmallar-sitevisiondagarna-2014/40297691/&); /* IE9 Compat Modes */ src: url(/slideshow/pverka-dina-formatmallar-sitevisiondagarna-2014/40297691/&) 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%
  • 21. 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.