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