Helvetica vs Arial i webdesign
Vi vil alle at innholdet på nettsidene våre skal være leservennlige, og det er mange hensyn å ta i typografien. Derfor bruker de aller fleste av oss (dvs de som som lager nettsider) såkalte nettrygge fonter (web safe fonts), i det minste til brødteksten.
Men hva skjer når man begynner å utforske disse reglene? Jeg har sett litt nærmere på bruk av Helvetica fremfor Arial i webdesign.
Et paradigmeskifte
Selv om vi er i ferd med å få et paradigmeskifte i bruk av fonter på web, vil det fortsatt ta tid før teknologien hos brukerne henger med. Men bruk av @font-face er i ferd med å revolusjonere typografien totalt på nett. Alle de største nettleserne i dag støtter @font-face. Og det er ikke et sekund for tidlig. Men da må vi heller ikke glemme at mange fortsatt bruker eldre versjoner av nettleserne.
I tillegg har metoder som sIFR og Cufon løst mange av problemene, selv om det finnes ulemper og fordeler her og. Men disse teknikkene brukes stort sett på overskrifter.
Men selv om de fleste er smertelig klar over begrensningene knyttet til nettlesere, og brukernes innstallerte fonter, er det ikke alle som er klar over hvordan operativsystemene viser fontene. Og det er her (mis)bruken av Helvetica kommer inn.
Arial vs Helvetica
Helvetica har aldri vært en trygg font å bruke på nett, om den er aldri så pen. For den er pen, dvs i hvert fall hos Mac brukere. Når man skal stable fonter i CSS, og man ønsker å bruke Arial, pleier man å stable dem slik;
body {font-family:Arial, Helvetica, sans-serif;}
Med dette sier vi at vi ønsker Arial som font over hele siden, og Helvetica dersom leseren av en eller annen grunn ikke har Arial innstallert, og til slutt en hvilken som helst sans-serif font, om de 2 første fontene ikke eksisterer hos brukeren.
Med @font-face forandrer alt seg. Da flytter vi nemlig fonten ut på nett, slik som vi gjør med feks bildefiler i dag. Vi lenker fonten opp mot nettsiden, og dermed er vi ikke avhengig av hva brukerne har innstallert av fonter. Genialt, så langt.
Men det er minst et problem ved det. Windows! For mens Mac brukere nyter nettsider i deilig flytende former, ser fortsatt Windows brukere mer hakkete fonter. Enn så lenge. Dermed løser ikke @font-face alt.
Utsnitt av Holte Design. Windows øverst, Mac nederst. Klar forskjell, selv ved bruk av Arial.
Og her kommer problemet med Helvetica inn. For svært mange rundt omkring velger å stable Helvetica fremfor Arial. Det skulle man tro løste saken. De med Mac får Helvetica, som jo er å foretrekke visuelt. De med Windows har ikke Helvetica ferdig innstallert , og dermed hopper man rett til Arial. Men hva med de som har innstallert Helvetica på Windows? Jo, det ser ut som et typografisk helvete. Her er et eksempel;
Webdesignmagasinet er nærmest uleselig på Windows med Helvetica innstallert.
Som man ser ganske tydelig har Windows mye å gå på med typografien. Og når jeg har nevnt dette pleier folk i min bransje ofte å si; “Skift heller til Mac du!”. Men hva hjelper det når majoriteten bruker Windows? Frem til Windows gjør noe med dette er det desverre vår oppgave som webutviklere å ta dette i betrakning, slik som vi i mange år har måttet ta hensyn til IE6. Det er brukeropplevelsen som må stå i fokus.
Så hva gjør man?
Noen har hevdet av man bør sette Helvetica fremfor Arial. Jeg skal ikke si hva dere skal gjøre, men det er viktig å være klar over at Helvetica renderer ekstremt dårlig i Windows i alle store nettlesere (ikke bare Firefox som har vært hevdet tidligere). Se an målgruppen din. Test på tvers av operativsystem og nettlesere om mulig. Vær klar over at selv om teksten er leservennlig hos deg, betyr ikke det nødvendigvis at den er det over hele linja.
Grunnen til at jeg nevner Helvetica spesielt er fordi mange velger å bruke det fremfor Arial, fordi Arial er en dårlig etterligning av Helvetica. Det er det ingen tvil om. Men det er heller ingen tvil om at Helvetica er nærmest uleselig i Windows. Og jo mindre størrelse, jo verre.
Men så kan du jo også stille deg spørsmålet; Hvor mange lesere har du med Helvetica innstallert på Windows?
Har dere noen tanker rundt dette?
Det er ofte en trist opplevelse å se webdesignet sitt slik som folk flest ser det, med IE og Windows. Men så tenker jeg at brukerne er jo vant til at nettsider ser sånn ut på sin maskin?!
Jeg bruker bevisst Helvetica før Arial. Greit, Windows-brukere har den ikke, derfor fungerer Arial fint som vikar. Helvetica er jo også originalen, Arial er MS’ kopi.
En annen ting er at nettleseren har veldig mye å si på det typografiske. På Safari ser fonten ofte “bløtere” ut enn i f.eks. Firefox og Internet Explorer. Alle tre rendrer tekst annerledes, uansett hvilken font du bruker. De tar ofte lite hensyn til operativsystemets visningsalternativer.
At Helvetica ser verre ut på Windows enn det gjør på Mac OS var jeg ikke klar over. Men jeg vil tørre å påstå at det er en Windows-feil, fremfor fontfeil, ettersom fonten er nøyaktig den samme.
Ronny-André Bendiksen´s last blog ..Oslo Grand Prix
Det er absolutt en windows feil, og dermed ser den like ille ut i alle nettlesere.
Men fakta er og blir at Helvetiva er ikke designet web! Det er Arial!
Eller gi Windows-brukerne litt starthjelp ved å få de til å bruke GDI++ istedet for ClearType: http://vladg.com/2009/03/make-windows-fonts-look-as-smooth-as-mac-os-x-fonts/
:)
hm…hvorfor tar ikke Windows i bruk dette da? Genialt!
Fin post, interessant lesning.
Ang windows og pc’er så blir jeg stadig vekk overrasket når jeg ser på maskinene til kompiser. Typisk tenker jeg “hvordan klarer dere å jobbe med denne maskinen? Det ser jo helt for jævlig ut..”
Og kompisene blir minst like overrasket når jeg viser dem Mac’en min. “Faen, ser jo bare så mye bedre ut der altså..”
Peter Andre Jensen´s last blog ..Det viktigste er å ha det artig
hehe, det er nok en vane Peter, men skjønner godt hva du mener!
Greia er å finne en webløsning som passer for alle…mer eller mindre!
Er du sikker på at du har fått slått på Cleartype? Det er ikke slått på av seg selv i XP og Vista. Prøv eventuelt denne: http://www.microsoft.com/typography/cleartype/tuner/tune.aspx
Er en vesentlig stor forskjell på ClearType og GDI på Windows 7:
Cleartype:
http://lh5.ggpht.com/_xGQKVDLykHM/SvrV5g4cGMI/AAAAAAAAAFs/lePPhkT05-M/ClearType.PNG
GDI:
http://lh4.ggpht.com/_xGQKVDLykHM/SvrV5kGvNdI/AAAAAAAAAFw/OnTPiynuwpc/s912/GDI.PNG
På Cleartype-bildet så har jeg gått gjennom veiviseren i Windows 7 for å få best mulig bilde og tekst til skjermen.
På GDI-bildet så startet jeg bare programmet og har ikke gjort noen innstillinger.
Thomas A.´s last blog ..Windows 7 fail – del 1
@Tom Øyvind; Jeg har ClearType på ja!
@Thomas; GDI gjør sitt, men hvordan ser helvetica ut da tro?
Uansett har det ikke noe å si hvilke innstillinger jeg har, det som er viktig er å gjøre innhold leservennlig for alle. Windows burde gjøre noe med dette.
Til opplysning så rendrer alle fonter (jeg har vært borti) helt nydelig på alle GNU/Linux-distribusjoner (jeg har vært borti). Problemet er selvsagt at disse ofte ikke har fonter som er “standard” på Windows og/eller OS X, dessverre. Men det kommer seg nok med tiden – fonter kommer til flyte rundt på nettet som fluer i fjøset.
@audun; Jeg syns det er snodig at vi i 2009 ennå ikke har dette med typografi/fonter på plass på tvers av teknologier!
Oi dette såg ikkje bra ut! Referar sjølvsagt til mitt eige bidrag til dårleg lesaroppleving for Windows-brukarar http://Webdesignmagasinet.no
Heldigvis er over 60% av dei besøkande her mac-brukarar, 30% windows og resten fordelt på mobilenettlesarar. Synd eg ikkje har webanalyseverktøy med oversikt over installerte fontar hos dei besøkande, det hadde vore interessant.
Skal ta i betraktning dette med lesbarheten i neste versjon av Webdesignmagasinet som er rett rundt hjørna. Vil jo absolutt at Webdesignmagasinet skal representere “best-practice”.
Anders-Meyer Eldøy´s last blog ..Bra CSS bøker
Ja det hadde vært kjekt med et verktøy som viser hvorvidt besøkende har den gjeldende fonten. Da kunne man lettere tatt en beslutning på hva som er brukervennlig for målgruppen!
Jeg må også skyte inn at jeg selv har brukt Helvetica på overskrifter, og det går helt fint, selv om det ikke er like pent.
Det er i brødtekst at Helvetica er et stort problem, særlig når vi snakker 10,11,12,13 px.
Kanskje du allerede har lest den, men dette er kanskje en artikkel som muligens hadde interessert deg, Mia:
http://www.alistapart.com/articles/on-web-typography/
@Eigil; Mange som har tipset meg om den, og jeg følger Zeldman, Santa Maria, og ALA ganske nøye. De er utrolige dyktige folk, men jeg syns ikke denne artikkeln satte så mye nytt i fokus.
Eller er det noe jeg ikke fått med meg? Hva sier han egentlig her?