Typografi
Inge Fossland
16. november 2012
–

Web Design is 95%
Typography
Oliver Reichenstein
http://informationarchitects.net/blog/the-web-is-all-abouttypography-p...
–

For better or worse, if you
design for the web, you are a
typographer.
Jon Tangerine
http://jontangerine.com/
Men hva er egentlig
typografi?
Typografi

Språk
Sette tekst
Skrifttyper
Grid
Hierarki
Teknologi
(...)
Språk
Typografi handler om å organisere tekstlige budskap.
Typografi
Skrifttype (font type)

Skriftstørrelse (font size)

Utforming og teknisk behandling av et (hovedsakelig) tekstl...
Hva gjør en tekst
lettlest?
Hvordan kan vi teste
lesbarhet?
Hvordan jobber vi med
typografi og innhold?
Hvordan jobber vi når vi
ikke har noe innhold?
Sette tekst
Behandle og formattere tekst, lage titler, lister, uthevinger osv.
Tittel

Brødtekst

Typografi
Utforming og teknisk behandling av et (hovedsakelig) tekstlig
budskap; den visuelle formen på...
Tittel

Brødtekst

<h1>Typografi</h1>

<p>Utforming og teknisk behandling av et (hovedsakelig) tekstlig
budskap; den visue...
Hvordan bør vi jobbe
med å sette tekst?
Er det designeren eller
innholdsprodusenten sin
jobb?
Tegnsetting?
•
•
•
•
•
•
•

Forkortelser, initialord, akronymer (f.eks. dvs., NRK, laser)
Punktum og komma (. og ,)
Spørsm...
Hvor viktig er riktig
tegnsetting?
Hvordan kan vi sikre at
systemet vi lager holder
vann?
Skrifttyper
Gi teksten form og personlighet.
Typografi
Typografi
Avant Garde Bold
Ascender

Cap
height

Typografi
Descender

Avant Garde Bold

Meanline
x-height
Baseline
Overlengde

Versalhøyde

Typografi
Underlengde

Avant Garde Bold

?
x-høyde
Grunnlinje
Antikva/Serif

Typografi
Georgia
Egyptienne/Slab serif

Typografi
Rockwell
Grotesk/Sans serif

Typografi
Helvetica Neue
Humanistisk grotesk

Typografi
Frutiger
Geometric sans

Typografi
Futura Medium
Script

typografi
EasyScript
Brush Script

Typografi
SignPainter HouseScript
Formal Script

Typografi
Shelley Script
Blackletter (Gotisk skrift)

Old English
Regular

Georgia

Bold
Light

Condensed

Georgia Pro

Regular

Semi Bold

Bold

Black
Hvordan velge riktig
skriftsnitt?
Når er det riktig å velge
bort profilfonten?
Hvor starter du hvis det
ikke finnes en profilfont?
Hva er viktigst?
Personlighet eller
lesbarhet?
Hvordan finner vi gode
skriftpar?
Hvor mange skrifttyper
trenger du?
Hva er egentlig en god
skrifttype?
Hierarki
Visualisere konseptuelle nivåer i teksten.
Størrelse
aa

aaaaa

6 7 8

9 10 11

+2

12

aaaa
14

16

+2

18

21

+3

aa
24

36

aaa
48

60

+12

72
Vekt
Tittel
Brødtekst
Case
TITTEL
Brødtekst
Farge
Tittel
Brødtekst
Skrifttype
Tittel
Brødtekst
Hvilke andre virkemidler
kan vi bruke for å skape
kontrast?
Hvordan bygger vi
gode hierarkier?
Hvor skal jeg starte?
Grid
Systematisere typografi.
50%

Ja, absolutt!

8%

Nei, ikke prøv.

Vet ikke hva registerlinjer er.

Er registerlinjer eller baseline grid en god idé...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna ...
–

Baseline grids are,
ultimately, most useful in
print.
Jason Santa Maria
http://jasonsantamaria.com/articles/baseline-gr...
–

Doing anything less (...), I’d
consider lazy.
Jan Schjetne
http://schjetne.net/2012/10/23/typography-on-web-and-inprint...
Er registerlinjer eller
baseline grid en god
ide på nett?
Når er det viktig? Når er
det ikke viktig?
Hvordan jobber vi evt.
med registerlinjer på
nettet?
Teknologi
Regissere og lede brukeren gjennom teksten.
Typografi
Mac OSX
Windows?
Hva gjør vi når fonten vi
har valgt ikke virker på
Windows?
Kan vi bruke hva som
helst nå eller er det
fortsatt verdana og
georgia som gjelder?
Skal vi gå helt bananas
bare fordi vi kan?
Må vi alltid jobbe med
typografi i HTML eller er
Photoshop fortsatt et
viktig verktøy?
Hvilken måleenhet er
best og hvorfor? Px, em,
rem, %.
Når er det riktig å ta
utgangspunkt i et ferdig
rammeverk?
Må vi jobbe annerledes
med typografi når vi
designer responsive
nettsted?
Er det best å hoste
fontene selv eller bør
man bruke en online
tjeneste?
?
Konklusjon.
netliferesearch.com
Typografi
Upcoming SlideShare
Loading in …5
×

Typografi

290
-1

Published on

Fra fagdag om typografi.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
290
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Typografi

  1. 1. Typografi Inge Fossland 16. november 2012
  2. 2. – Web Design is 95% Typography Oliver Reichenstein http://informationarchitects.net/blog/the-web-is-all-abouttypography-period/
  3. 3. – For better or worse, if you design for the web, you are a typographer. Jon Tangerine http://jontangerine.com/
  4. 4. Men hva er egentlig typografi?
  5. 5. Typografi Språk Sette tekst Skrifttyper Grid Hierarki Teknologi (...)
  6. 6. Språk Typografi handler om å organisere tekstlige budskap.
  7. 7. Typografi Skrifttype (font type) Skriftstørrelse (font size) Utforming og teknisk behandling av et (hovedsakelig) tekstlig budskap; den visuelle formen på en trykt tekst. Sentrale problemstillinger er leselighet og avpassing av formen til innholdet gjennom valg av skrift, skriftstørrelse, linjelengde, linjeavstand, farger osv., samt tilpasning av tekst- og bildeflater til papirflaten og plassering av de enkelte elementer. Linjeavstand (leading) Linjelengde (measure)
  8. 8. Hva gjør en tekst lettlest?
  9. 9. Hvordan kan vi teste lesbarhet?
  10. 10. Hvordan jobber vi med typografi og innhold?
  11. 11. Hvordan jobber vi når vi ikke har noe innhold?
  12. 12. Sette tekst Behandle og formattere tekst, lage titler, lister, uthevinger osv.
  13. 13. Tittel Brødtekst Typografi Utforming og teknisk behandling av et (hovedsakelig) tekstlig budskap; den visuelle formen på en trykt tekst. Sentrale problemstillinger er leselighet og avpassing av formen til innholdet gjennom valg av skrift, skriftstørrelse, linjelengde, linjeavstand, farger osv., samt tilpasning av tekst- og bildeflater til papirflaten og plassering av de enkelte elementer.
  14. 14. Tittel Brødtekst <h1>Typografi</h1> <p>Utforming og teknisk behandling av et (hovedsakelig) tekstlig budskap; den visuelle formen på en trykt tekst. Sentrale problemstillinger er leselighet og avpassing av formen til innholdet gjennom <em>valg av skrift</em>, <em>skriftstørrelse</em>, <em>linjelengde</em>, <em>linjeavstand</em>, <em>farger</em> osv., samt tilpasning av tekst- og bildeflater til papirflaten og plassering av de enkelte elementer.</p>
  15. 15. Hvordan bør vi jobbe med å sette tekst?
  16. 16. Er det designeren eller innholdsprodusenten sin jobb?
  17. 17. Tegnsetting? • • • • • • • Forkortelser, initialord, akronymer (f.eks. dvs., NRK, laser) Punktum og komma (. og ,) Spørsmåls- og utropstegn (? og !) Kolon og semikolon (: og ;) Bindestrek og tankestrek (- og –) Anførselstegn («sitat», “sitat” og ‘sitat’) Osv.
  18. 18. Hvor viktig er riktig tegnsetting?
  19. 19. Hvordan kan vi sikre at systemet vi lager holder vann?
  20. 20. Skrifttyper Gi teksten form og personlighet.
  21. 21. Typografi
  22. 22. Typografi Avant Garde Bold
  23. 23. Ascender Cap height Typografi Descender Avant Garde Bold Meanline x-height Baseline
  24. 24. Overlengde Versalhøyde Typografi Underlengde Avant Garde Bold ? x-høyde Grunnlinje
  25. 25. Antikva/Serif Typografi Georgia
  26. 26. Egyptienne/Slab serif Typografi Rockwell
  27. 27. Grotesk/Sans serif Typografi Helvetica Neue
  28. 28. Humanistisk grotesk Typografi Frutiger
  29. 29. Geometric sans Typografi Futura Medium
  30. 30. Script typografi EasyScript
  31. 31. Brush Script Typografi SignPainter HouseScript
  32. 32. Formal Script Typografi Shelley Script
  33. 33. Blackletter (Gotisk skrift) Old English
  34. 34. Regular Georgia Bold
  35. 35. Light Condensed Georgia Pro Regular Semi Bold Bold Black
  36. 36. Hvordan velge riktig skriftsnitt?
  37. 37. Når er det riktig å velge bort profilfonten?
  38. 38. Hvor starter du hvis det ikke finnes en profilfont?
  39. 39. Hva er viktigst? Personlighet eller lesbarhet?
  40. 40. Hvordan finner vi gode skriftpar?
  41. 41. Hvor mange skrifttyper trenger du?
  42. 42. Hva er egentlig en god skrifttype?
  43. 43. Hierarki Visualisere konseptuelle nivåer i teksten.
  44. 44. Størrelse aa aaaaa 6 7 8 9 10 11 +2 12 aaaa 14 16 +2 18 21 +3 aa 24 36 aaa 48 60 +12 72
  45. 45. Vekt Tittel Brødtekst
  46. 46. Case TITTEL Brødtekst
  47. 47. Farge Tittel Brødtekst
  48. 48. Skrifttype Tittel Brødtekst
  49. 49. Hvilke andre virkemidler kan vi bruke for å skape kontrast?
  50. 50. Hvordan bygger vi gode hierarkier?
  51. 51. Hvor skal jeg starte?
  52. 52. Grid Systematisere typografi.
  53. 53. 50% Ja, absolutt! 8% Nei, ikke prøv. Vet ikke hva registerlinjer er. Er registerlinjer eller baseline grid en god idé på nett? 42%
  54. 54. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper Base line suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus Lorem ipsum dolor sit amet, consectetuer adipiscing legentis in iis qui facit eorum claritatem. Investigationes elit, sed diam nonummy nibh euismod tincidunt ut demonstraverunt lectores legere me lius quod ii legunt laoreet dolore magna aliquam erat volutpat. saepius.
  55. 55. – Baseline grids are, ultimately, most useful in print. Jason Santa Maria http://jasonsantamaria.com/articles/baseline-grids-on-the-web
  56. 56. – Doing anything less (...), I’d consider lazy. Jan Schjetne http://schjetne.net/2012/10/23/typography-on-web-and-inprint/
  57. 57. Er registerlinjer eller baseline grid en god ide på nett?
  58. 58. Når er det viktig? Når er det ikke viktig?
  59. 59. Hvordan jobber vi evt. med registerlinjer på nettet?
  60. 60. Teknologi Regissere og lede brukeren gjennom teksten.
  61. 61. Typografi Mac OSX
  62. 62. Windows?
  63. 63. Hva gjør vi når fonten vi har valgt ikke virker på Windows?
  64. 64. Kan vi bruke hva som helst nå eller er det fortsatt verdana og georgia som gjelder?
  65. 65. Skal vi gå helt bananas bare fordi vi kan?
  66. 66. Må vi alltid jobbe med typografi i HTML eller er Photoshop fortsatt et viktig verktøy?
  67. 67. Hvilken måleenhet er best og hvorfor? Px, em, rem, %.
  68. 68. Når er det riktig å ta utgangspunkt i et ferdig rammeverk?
  69. 69. Må vi jobbe annerledes med typografi når vi designer responsive nettsted?
  70. 70. Er det best å hoste fontene selv eller bør man bruke en online tjeneste?
  71. 71. ? Konklusjon.
  72. 72. netliferesearch.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×