webbtypografi på cap&design live
DESCRIPTION
Tisdagen den 19 mars intog Creunas designers Robin Lantz och Johan Ekhager scenen på CAP&Design Live där de ska prata Webbtypografi. CAP&Design Live bjuder in till en eftermiddag med spännande talare som delar med sig av erfarenhet, inspiration, kunskap och svaren på många av dina viktigaste frågor kring typografi. Robin Lantz och Johan Ekhager från Creuna är på plats och ska prata om typografi för webben, både praktiskt och tekniskt. Om vad som funkar och inte funkar, responsive och icke responsive men framförallt om att sluta göra undantag i grafiska manualer med just typsnitt för webben.TRANSCRIPT
![Page 1: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/1.jpg)
Webbtypografi
ROBIN LANTZ JOHAN EKHAGER
![Page 2: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/2.jpg)
![Page 3: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/3.jpg)
Swiss style
![Page 4: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/4.jpg)
90-talswebb
![Page 5: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/5.jpg)
Fonter 1496-1996
![Page 6: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/6.jpg)
Webbfonter 1996-2002
![Page 7: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/7.jpg)
WebbutvecklingenApple:s designtrendTjänsterUpplösning
Förutsättningar
![Page 8: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/8.jpg)
6 19 16 4.0
7 20 17 5.0
8 21 18 5.1
9 22 19 6.0
10 23
![Page 9: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/9.jpg)
![Page 10: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/10.jpg)
web fonts
![Page 11: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/11.jpg)
Upplösning
![Page 12: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/12.jpg)
Grafiska manualerWebbranchenWebbläsare & OSOverload
Motverkande faktorer
![Page 13: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/13.jpg)
Grafiska manualer
![Page 14: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/14.jpg)
Sökresultat:Gotham
Ingenting :(
![Page 15: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/15.jpg)
![Page 16: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/16.jpg)
Browsers renderar olika
![Page 17: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/17.jpg)
Sökresultat:Alla typsnitt
5414 typsnitt funna :O
![Page 18: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/18.jpg)
Tips och tricks
![Page 19: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/19.jpg)
Regular eller BoldCondensedÄkta italics
Vikter
![Page 20: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/20.jpg)
Ingen kerning
autokerning
manuell kerning
![Page 21: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/21.jpg)
F l y g a n d e b ä c k a s i n e r s ö k a h w i l a p å m j u k a t u v o r
Flygande bäckasiner söka hwila på mjuka tuvor
Flygande bäckasiner söka hwila på mjuka tuvor
Tracking
![Page 22: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/22.jpg)
line-heightline-height: 1;
line-height: 1.5;
line-height: 2;
Vivamus semper convallis massa, ut lacinia ipsum malesuada non. Aenean condimentum tellus vitae purus euismod ultrices. Fusce imperdiet arcu ut augue bibendum ut condimentum metus porta.
Vivamus semper convallis massa, ut lacinia ipsum malesuada non.
Aenean condimentum tellus vitae purus euismod ultrices. Fusce
imperdiet arcu ut augue bibendum ut condimentum metus porta.
Vivamus semper convallis massa, ut lacinia ipsum malesuada non.
Aenean condimentum tellus vitae purus euismod ultrices. Fusce
imperdiet arcu ut augue bibendum ut condimentum metus porta.
![Page 23: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/23.jpg)
Finns alla glypher?
° “ # € % &
/ ( ) = ü œ
![Page 24: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/24.jpg)
11pt på print
16px på skärm≈
![Page 25: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/25.jpg)
![Page 26: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/26.jpg)
Responsiv typografi
![Page 27: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/27.jpg)
Denna text är skön eftersom den är mellan 45* och 75 tecken på varje rad. *Skriv gärna ut denna när ni testar på sajten.
45-75 tecken/rad
![Page 28: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/28.jpg)
![Page 29: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/29.jpg)
![Page 30: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/30.jpg)
Alla fonter finns onlineBättre licensmodellerUtgångspunkt digitaltUpplösning
Framtiden
![Page 31: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/31.jpg)
Fastna inte i gamla banor Ta hjälp av tjänsterDet finns inga genvägar...Tänk responsive
Sammanfattning
![Page 32: Webbtypografi på CAP&Design Live](https://reader034.vdocuments.mx/reader034/viewer/2022051610/548b0da0b47959e70c8b609b/html5/thumbnails/32.jpg)
Tack! \o/