21
Typsnitt och text Typografi

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

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

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

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
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

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

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

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
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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