typografi
DESCRIPTION
Fra fagdag om typografi.TRANSCRIPT
Typografi
Inge Fossland16. november 2012
– Web Design is 95% TypographyOliver Reichensteinhttp://informationarchitects.net/blog/the-web-is-all-about-typography-period/
– For better or worse, if you design for the web, you are a typographer.Jon Tangerinehttp://jontangerine.com/
Men hva er egentlig typografi?
Typografi SpråkSette tekstSkrifttyperGridHierarkiTeknologi(...)
SpråkTypografi handler om å organisere tekstlige budskap.
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.
Linjelengde (measure)
Linjeavstand(leading)
Skrifttype (font type) Skriftstørrelse (font size)
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 tekstBehandle og formattere tekst, lage titler, lister, uthevinger osv.
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.
Brødtekst
Tittel
<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>
Brødtekst
Tittel
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åls- og utropstegn (? og !)• Kolon og semikolon (: og ;)• Bindestrek og tankestrek (- og –)• Anførselstegn («sitat», “sitat” og ‘sitat’)• Osv.
Hvor viktig er riktig tegnsetting?
Hvordan kan vi sikre at systemet vi lager holder vann?
SkrifttyperGi teksten form og personlighet.
Typografi
Typografi
Avant Garde Bold
TypografiAscender
Descender
Avant Garde Bold
Baseline
Meanlinex-height
Capheight
TypografiOverlengde
Underlengde
Avant Garde Bold
Versal-høyde
Grunnlinje
?x-høyde
TypografiAntikva/Serif
Georgia
TypografiEgyptienne/Slab serif
Rockwell
TypografiHelvetica Neue
Grotesk/Sans serif
Typografi
Frutiger
Humanistisk grotesk
Typografi
Futura Medium
Geometric sans
typografi
EasyScript
Script
Typografi
SignPainter HouseScript
Brush Script
Typografi
Shelley Script
Formal Script
Blackletter (Gotisk skrift)
Old English
Regular Bold
Georgia
Light Regular Semi Bold Bold Black
Condensed
Georgia Pro
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?
HierarkiVisualisere konseptuelle nivåer i teksten.
Størrelse
a a a a a a a a aaaaaaaa7260483624211816141211109876
+2 +2 +3 +12
Vekt
TittelBrødtekst
Case
TITTELBrødtekst
Farge
TittelBrødtekst
Skrifttype
TittelBrødtekst
Hvilke andre virkemidler kan vi bruke for å skape kontrast?
Hvordan bygger vi gode hierarkier?
Hvor skal jeg starte?
GridSystematisere typografi.
Ja, absolutt! 50%
Vet ikke hva registerlinjer er. 42%
Nei, ikke prøv.8%
Er registerlinjer eller baseline grid en god idé på nett?
Baseline
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 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 legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
– Baseline grids are, ultimately, most useful in print. Jason Santa Mariahttp://jasonsantamaria.com/articles/baseline-grids-on-the-web
– Doing anything less (...), I’d consider lazy.Jan Schjetnehttp://schjetne.net/2012/10/23/typography-on-web-and-in-print/
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?
TeknologiRegissere 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