typsnitt och text - creative rooms - art and design · val av typsnitt - ger karaktär för...
TRANSCRIPT
![Page 1: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/1.jpg)
Typsnitt och text
Typografi
![Page 2: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/2.jpg)
![Page 3: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/3.jpg)
Val av typsnitt - ger karaktär för hemsidan
Lämplig avstånd och mellanrum mellan tecken
Brödtext i korta stycken
Tillräcklig kontrast mellan text och bakgrund
Textraderna bör vara relativt korta, ca 50 tecken.
Sans-serif font ska användas för brödtext. (skärm) Fontstorlek minst 9 punkter.
Brödtext struktureras i korta stycken.
Typsnitt och text
![Page 4: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/4.jpg)
Typografi
![Page 5: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/5.jpg)
Typografi är en bred term för konsten och
hantverket att utforma texter – i tryck
eller på skärm – så att textens budskap
förmedlas på bästa möjliga sätt, och
samtidigt är estetiskt tilltalande för
läsaren.
Källa: http://sv.wikipedia.org/wiki/Typografi
![Page 6: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/6.jpg)
![Page 7: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/7.jpg)
Bokstävernas beståndsdelar
![Page 8: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/8.jpg)
Bokstavsvarianter
Typsnitt: Caslon
![Page 9: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/9.jpg)
Teckensnittsfamiljer
Diagonalantikva
Transantikva
Vertikalantikva
Mekaner
Skripter
Fantasistilar
Sansserif
![Page 10: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/10.jpg)
Synlig typografi
![Page 11: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/11.jpg)
Osynlig typografi
![Page 12: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/12.jpg)
3 formgivningsprinciper att utgå ifrån:
Symmetri
Asymmetri
Kontrast
![Page 13: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/13.jpg)
Symmetri
![Page 14: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/14.jpg)
Asymmetri
![Page 15: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/15.jpg)
Kontrast: Storlek
![Page 16: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/16.jpg)
Kontrast: Styrka
![Page 17: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/17.jpg)
Kontrast: Form
![Page 18: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/18.jpg)
Kontrast: Färg
![Page 19: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/19.jpg)
http://www.awwwards.com/best-20-webfonts-from-google-web-fonts-and-font-face-embedding.html
![Page 20: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/20.jpg)
http://thisisplayful.com/
![Page 21: Typsnitt och text - Creative Rooms - Art and Design · Val av typsnitt - ger karaktär för hemsidan Lämplig avstånd och mellanrum mellan tecken Brödtext i korta stycken Tillräcklig](https://reader033.vdocuments.site/reader033/viewer/2022050503/5f953699dd21c510b07930b9/html5/thumbnails/21.jpg)
Best 20 webfonts from Google Web Fonts and @font-face embedding
http://www.awwwards.com/best-20-webfonts-from-google-web-fonts-and-font-face-
embedding.html
100 Greatest Free Fonts Collection for 2013
http://www.awwwards.com/100-greatest-free-fonts-collection-for-2013.html
CSS Font
http://www.w3schools.com/css/css_font.asp
A Journey Through Beautiful Typography In Web Design
http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-
design/
45 Creative Uses of Typography in Web Design
http://www.1stwebdesigner.com/inspiration/45-creative-uses-of-typography/
20 typographic websites
http://www.webdesignerdepot.com/2013/02/20-typographic-websites/
Serif vs. Sans: the final battle
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
Länktips – Typografi och webfonts