Nina Langseth - En font er en fon er en font. Eller?
Download as pptx, pdf0 likes681 views
Hvordan velge riktige fonter for nettløsninger som skal være universelt utformet.
Nina Langseth - En font er en fon er en font. Eller?
- 1. En font er bare en font, eller? Nina Kristin Langseth @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 2. Det er utfordrende å skulle velge en font til et nettsted, og utvalget er nesten uendelig. Så, hvordan gå frem for å finne den perfekte fonten til nettstedet ditt, og hvorfor velge akkurat den ene? @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 3. Åpen eller lukket font? @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 4. Bli enig om kriteriene Våre kriterier • Fonten skal være åpen slik at den er lettere å lese. Tegn som a, e og c ikke gror igjen • Det må være mulig å kunne skille mellom 1, l, I, o ,O, o og tallene 6, 8, og 9. • Strekktykkelse må være lik, spesielt i overgangene. • Tydelig overlengder og underlengder på bokstavene. • Gode bokstavmellomrom og ordmellomrom. • Stor skriftfamilie (light, regular, italic, bold, semibold … ) @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 5. Forberedelser til workshop @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 6. Sammenlign fontene @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 7. Vurder igjen med fokus på detaljene • Tydelige tall og spesialtegn i tekst • Hvordan fonten passet til den visuelle identiteten • Hvordan overgangene var utformet @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 8. Jaf Facit @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 9. Testing @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 10. Når man har funnet den perfekte fonten så går alt av seg selv. Da blir nettsiden fin uansett, eller? @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 11. @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 12. Fra ingen struktur til … x-høyde. Høyden på den delen av bokstavene som går fra skriftlinjen og opp til toppen av liten x. Liten x brukes som målestav for bokstavenes kjernehøyde fordi den har en rett, nøyaktig målbar over-og underkant. Mange av de andre bokstavene har avrundet overkant som av visuelle årsaker strekker seg litt over x-høyden. Antikva fonten har forskjellig tykkelse på strekene og seriffer, altså små linjer øverst og nederst på bokstaven. Disse seriffene gjør det enklere å lese, for øyet følger disse strekene som en linje. Antikva fonten er seriøs og høytidelig. Antikva er teksttypen man ofte ser i aviser, bøker og lignende. Grotesk font omfatter skrifttyper uten seriffer og har som regel tilnærmet lik linjetykkelse (monolineært skriftbilde). Grotesk blir ofte sett på som en forenklet versjon av antikvaskriftene (derav sans serif - «uten seriffer»), men den har røtter helt tilbake greske inskripsjoner før romerne tok i bruk seriffer. @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 13. Riktig spaltebredde x-høyde. Høyden på den delen av bokstavene som går fra skriftlinjen og opp til toppen av liten x. Liten x brukes som målestav for bokstavenes kjernehøyde fordi den har en rett, nøyaktig målbar over- og underkant. Mange av de andre bokstavene har avrundet overkant som av visuelle årsaker strekker seg litt over x-høyden. Antikva fonten har forskjellig tykkelse på strekene og seriffer, altså små linjer øverst og nederst på bokstaven. Disse seriffene gjør det enklere å lese, for øyet følger disse strekene som en linje. Antikva fonten er seriøs og høytidelig. Antikva er teksttypen man ofte ser i aviser, bøker og lignende. Grotesk font omfatter skrifttyper uten seriffer og har som regel tilnærmet lik linjetykkelse (monolineært skriftbilde). Grotesk blir ofte sett på som en forenklet versjon av antikvaskriftene (derav sans serif - «uten seriffer»), men den har røtter helt tilbake greske inskripsjoner før romerne tok i bruk seriffer @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 14. Avsnitt X-høyde. Høyden på den delen av bokstavene som går fra skriftlinjen og opp til toppen av liten x. Liten x brukes som målestav for bokstavenes kjernehøyde fordi denhar en rett, nøyaktig målbar over- og underkant. Mange av de andre bokstavene har avrundet overkant som av visuelle årsaker strekker seg litt over x-høyden. Antikva fonten har forskjellig tykkelse på strekene og seriffer, altså små linjer øverst og nederst på bokstaven. Disse seriffene gjør det enklere å lese, for øyet følger disse strekene som en linje. Antikva fonten er seriøs og høytidelig. Antikva er teksttypen man ofte ser i aviser, bøker og lignende. Grotesk font omfatter skrifttyper uten seriffer og har som regel tilnærmet lik linjetykkelse (monolineært skriftbilde). Grotesk blir ofte sett på som en forenklet versjon av antikvaskriftene (derav sans serif - «uten seriffer»), men den har røtter helt tilbake greske inskripsjoner før romerne tok i bruk seriffer @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 15. Mellomtitler X-høyde Høyden på den delen av bokstavene som går fra skriftlinjen og opp til toppen av liten x. Liten x brukes som målestav for bokstavenes kjernehøyde fordi denhar en rett, nøyaktig målbar over- og underkant. Mange av de andre bokstavene har avrundet overkant som av visuelle årsaker strekker seg litt over x-høyden. Antikva Fonten har forskjellig tykkelse på strekene og seriffer, altså små linjer øverst og nederst på bokstaven. Disse seriffene gjør det enklere å lese, for øyet følger disse strekene som en linje. Antikva fonten er seriøs og høytidelig. Antikva er teksttypen man ofte ser i aviser, bøker og lignende. Grotesk Font omfatter skrifttyper uten seriffer og har som regel tilnærmet lik linjetykkelse (monolineært skriftbilde). Grotesk blir ofte sett på som en forenklet versjon av antikvaskriftene (derav sans serif - «uten seriffer»), men den har røtter helt tilbake greske inskripsjoner før romerne tok i bruk seriffer @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 16. Med bilder X-høyde Høyden på den delen av bokstavene som går fra skriftlinjen og opp til toppen av enliten x. Liten x brukes som målestav for bokstavenes kjernehøyde fordi denhar en rett, nøyaktig målbar over- og underkant. Antikva-font Fonten har forskjellig tykkelse på strekene og seriffer, altså små linjer øvere og nederst på bokstaven. Disse seriffene gjør det enklere å lese, for øyet følger disse strekene som en linje. Grotesk-font Font omfatter skrifttyper uten seriffer og har som regel tilnærmet lik linjetykkelse (monolineært skriftbilde). Grotesk blir ofte sett på som en forenklet versjon av antikvaskriftene (derav sans serif - «uten seriffer»). @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 17. Enklere tekst X-høyde X-høyden er høyden på en liten x Antikva Font med seriffer Grotesk Font uten seriffer @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
- 18. Takk for meg! @NkLangseth nina.langseth@bouvet.no @NkLangseth BOUVET ASA ØKT | DIGITAL | EFFEKT
Editor's Notes
- #2: Hei ; Nina Kristin Langseth – jobber som interaksjonsdesigner og grafisk designer - Vil fortelle dere om font og en metode vi har kommet frem til ved å velge en font med tanke på universel utforming.
- #3: Vi opplever alt for ofte at en font velges basert på følelser og ikke faglig argumentasjon, derfor har vi utarbeidet en metode for hvordan sammenligne og velge en font med fokus på UU. Ikke feil å velge basert på følelser, men med krav til UU- blir fagelig vurdering enda viktigere. Forskrift om universell utforming av IKT-løsninger sier ikke noe spesifikt om fontvalg. Det er også vanskelig å finne god litteratur om typografi og universell utforming på web. Likevel er det kvaliteter ved en font som gir den høyere lesbarhet Vårt mål var å finne en font som oppfylte kundens og våre krav til universell utforming og lesbarhet, men metoden er fleksibel og kan brukes uavhengig av målsetting.
- #4: X-høyde: Er høyden på en liten x Overlengde: Bokstavdel på en del minuskler (små bokstaver) som stikker opp over x-høyden Underlengde: Den delen av bokstavene (minusklene) som ligger under grunnlinjen Åpen font: Lukket font: Lik strektykkelse: Ulik streltykkelse:
- #5: Bli enig om kriteriene Vi startet prosessen med et arbeidsmøte der vi ble enig om hvilke kriterier vi ønsket fonten vår skulle oppfylle. Våre kriterier… Ved å bestemme oss for kriteriene fikk vi en felles forståelse for hva vi ønsket, samtidig som vi tidlig i prosessen kunne eliminere bort flere fonter.
- #6: Gjør research I arbeidsmøtet ble vi enige om å ta kontakt med fontdesignere og typografieksperter for å få uttalelser om kriteriene og forslag til fontvalg. I tillegg til ekspertuttalelsene gjorde vi research på nettet og i litteraturen. Bruk nettet og annen litteratur for å finne argumenter som støtter kriteriene dine og forslag til fonter. Det finnes mye god litteratur om typografi og lesbarhet som man kan kombinere med kunnskap om universell utforming. Finn fonter Utfra ekspertuttalelsene og researchen gjorde vi og kunden et utvalg fonter som vi mente var innenfor kriteriene vi hadde blitt enige om. Vi anbefaler at man gjør et utvalg på 5–10 fonter.
- #7: Vi hadde valgt ut 10 fonter, men hvordan skulle vi velge 1 av 10 fonter? Hvorfor velge den ene fremfor den andre? Fordi den ene ser ut som den er bedre å lese eller fordi den faktisk er det? Vi måtte vurdere og eliminere ut fra kriteriene. Vi satte opp kriteriene vi var blitt enige om i en tabell. Hvis fonten oppfylte et kriterie fikk den et kryss, hvis ikke ble cella stående åpen. Ved å bruke en tabell til å vudere fontene i fikk vi raskt oversikt over de ulike fontene som oppfyller alle kriteriene vi ønsket. Vi hadde også en rad vi kalte annet, hvor vi kunne legge til tilleggsinformasjon som ikke ble dekket av kriteriene, men som kunne telle positiv eller negativt for fonten. Liten l med løkke fantes i ekstra tegn til fonten slik at den kunne benyttes i stedet for den som vises her.
- #8: Vurder igjen med fokus på detaljene Etter å ha vurdert de 10 fontene i tabellen sto vi igjen med 3 fonter som oppfylte alle kravene. I tillegg til at fonten skulle oppfylle krav til lesbarhet og universell utforming: skulle fonten kommunisere komplekse akademiske tekster, passe inni en etablert visuell identitet og gjengis godt på gamle PC skjermer. Vi vurderte derfor: Tydelige tall og spesialtegn i tekst God kontrasten mellom variantene i skriftfamilien (light, regular, italic, bold, semibold … ) Hvordan fonten passet til den visuelle identiteten Hvordan overgangene var utformet Etter å ha vurdert de 3 fontene som sto igjen med fokus på detaljene, var det enighet om en font i gruppa. JAF Facit var vår favoritt.
- #10: Men vi må jo teste – vi brukertester alt vi gjør. Vi vurderte: Bokstaver og tegn beholdt formene Fonten ble tykkere eller tynnere i noen browsere og devicer Hvordan avstanden mellom ord, bokstaver og tegn så ut Så på helhetsinntrykket på selve leserbilde Vi testet: Browsere: Chrome, Safari, Firefox ,Internet Explorer 9–11 Devicer: iPhone eller iPad , Androidtelefon eller –tablet og Windowstelefon eller tablet
- #12: Men dette er jo ikke tilfelle, Selv når man har funnet den perfekte fonten er det fortsatt utfordringer Her er det brukt en god lesbar font, men som man ser så er tittelen for lang, og dermed blir brødsmulestien også for lang. Men linjelengden er bra Det finnes tittel, ingress og brødtekst. Dersom alt er lagt til rette for at det er bra, det vil si at designet er god og utvikler har gjort alt riktig ligger utfordringene hos redaktørene. Tenkte jeg bare kunne gå gjennom noen grep man kan gjøre i forhold til tekst og struktur Overskrift og struktur Tekstens formatering Punktlister
- #18: Fonten alene er ikke nok til å vise budskapet. Det er også viktig hvordan man bygger opp hver enkelt side. Ved å bruke meningsbærende bilder og illustrasjoner sammen med strukturert tekst vil dette gjøre det enklere for alle. Tilslutt vil jeg si; Skrevet et blogginnlegg om dette på bloggen vår, så om noen syntes det var mange nye ord og utrykk så kan man ta en titt på blogginnlegget og lese litt mer om det.