Het ideale font voor programmeurs

Het ideale font voor programmeurs Onderzoeksverslag

Hogeschool Utrecht Communicatie & Media Design Auteur: Benjamin van Bienen (1576750) Docent: Dick Swart Specialisatie: Visual design seminar 2014-B

Samenvatting Ik heb onderzoek gedaan naar het ideale font voor programmeurs. Er is geen lettertype dat bij uitstek gebruikt wordt onder deze doelgroep, desondanks dat programmeurs soms duizenden regels code op een dag schrijven. Het leek mij interessant om erachter te komen hoe een font het makkelijker kan maken voor een programmeur om zijn werk te doen. Daar is dit onderzoek uit voortgekomen, om te kijken of het mogelijk is een ideaal font te creëren dat voldoet aan de eisen van een programmeur. Ik heb mijzelf de volgende hoofdvraag gesteld: Welke guiding principles zijn er te formuleren voor een ideaal lettertype dat gebruikt wordt voor coderen? Om antwoord op deze vraag te geven heb ik door middel van fora contact gelegd met de doelgroep, om erachter te komen wat hun wensen zijn en tegen welke problemen zij aanlopen. Daarnaast heb ik een desktopresearch gedaan. Om het onderzoek te sturen heb ik een aantal deelvragen geformuleerd: - Zijn er al eerder lettertypen specifiek voor programmeurs ontworpen? - Wat is het voordeel van monospace lettertypen? - Is er een voorkeur tussen serif of sans-serif lettertypen? - Hoe kan er het beste een onderscheid worden gemaakt tussen vergelijkbare karakters? - Welke speciale karakters moeten in het lettertypen worden opgenomen en hoe kunnen deze het beste weergegeven worden? Binnen dit verslag worden de resultaten vanuit mijn onderzoek behandeld. In de conclusie komen de belangrijkste inzichten uit mijn onderzoek naar voren, die samen een antwoord geven op mijn gestelde hoofdvraag.

Lettertypes voor codering Als eerste stap ben ik gaan onderzoeken of er al eerder lettertypes gemaakt zijn specifiek voor programmeurs. Door middel van desktop research heb ik een lijst kunnen maken aan lettertypes. De lettertypes die het vaakste naar voren kwamen heb ik vervolgens onder de loep genomen.

Anonymous Pro 2009 Een niet-proportioneel lettertype dat speciaal voor het schrijven van codering is ontworpen. Anonymous Pro biedt uitgebreide ondersteuning voor de meeste Latijns-gebaseerde, West- en Centraal-Europese talen, evenals Griekse en Cyrillische.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 [ ] ( ) { } # $ ! ? ; “ ‘ / \


Source Code Pro 2012 Source Code Pro is ontworpen in opdracht van Adobe. Het lettertype stamt af van de Source Sans en is aangepast naar een niet-proportioneel lettertype. Adobe wilde hiermee inspelen op de vraag naar een lettertype voor codering.

Droid Sans Mono 2009 Google heeft verschillende lettertypen laten ontwerpen om te gebruiken op hun Android platform. De Droid Sans Mono is een niet-proportioneel lettertype, waarvan de lettervormen met leesbaarheid in het achterhoofd zijn ontworpen.



Consolas 2007 Consolas is een niet-proportioneel lettertype ontwikkeld in opdracht van Windows. Het lettertype is specifiek bedoeld voor gebruik in programmeer omgevingen.

A B C D E F G H I J K L M N O P Q R S T Lettertype dat ontworpen is voor technische werkzaamheden. Hierbij is geprobeerd een U V W X Y Z duidelijk onderscheid te maken tussen de a b c d e f g h i j k karakters: L / I / 1 en de karakters: 0 / O. l m n o p q r s t DejaVu Sans Mono is ook een niet-proportioneel lettertype. u v w x y z 1 2 3 4 5 6 7 8 9 0 [ ] ( ) { } # $ ! ? ; “ ‘ / \ DejaVu Sans Mono 2004


Courier 1955 De Courier is nooit bedoeld geweest voor het schrijven van code. Echter in de jaren 90 was dit een van de weinige niet-proportionele lettertypes dat standaard te vinden was op Windows. Het lettertype is daarom erg populair geworden onder programmeurs en is in veel tekstverwerkers nog steeds ingesteld als standaard lettertype. Daarom vond ik dat het lettertype niet in mijn onderzoek mocht ontbreken.

Monospace Wat is het voordeel van monospace lettertypen? Met de term monospace worden niet-proportionele lettertypes bedoeld. Dat wil zeggen dat elk karakter en elke spatie dezelfde breedte op het scherm omvat. Elke programmeur waar ik contact mee heb gehad codeert in monospace. Binnen hun werkzaamheden hebben monospace lettertypen bepaalde voordelen die een proportioneel lettertype niet hebben. Binnen codering kan elk karakter dezelfde potentiële waarde hebben. Door de eerlijke horizontale verdeling binnen niet-proportionele lettertypes heeft elk karakter dezelfde ruimte om deze potentiële waarde te vertegenwoordigen. Voornamelijk leestekens zijn een stuk makkelijker te onderscheiden. Leestekens zijn vaak klein en/of smal en kunnen daarom binnen een proportioneel lettertype veel op elkaar lijken of wegvallen.

!?’”;:(){}[]

!?’”;:(){}[]

Proportioneel lettertype

Niet-proportioneel lettertype

Daarnaast zijn sommige leestekens veel groter dan anderen. Dit kan afleiden omdat zij meer de aandacht trekken. Binnen een niet-proportioneel lettertype gebeurd dit minder snel door de evenredige breedte van de karakters. Deze horizontale verdeling zorgt er ook voor dat de code makkelijker te lezen is op karakter-niveau. Zo zijn fouten in de code sneller te herkennen, en vergelijkbare karakters zijn iets beter van elkaar te onderscheiden.

oO0 jil1I

oO0 jil1I

Proportioneel lettertype

Niet-proportioneel lettertype

Niet-proportionele letters creëren ook een verticaal rooster binnen een document. Omdat karakters dezelfde breedte hebben lijnen zij hetzelfde uit met de karakters op regels eronder. Dit zorgt ervoor dat een programmeur een 2-dimensionale structurering binnen zijn document kan gebruiken. Dit kan verschillende voordelen opleveren tijdens het schrijven van code. Daarnaast ziet een document er zo veel overzichtelijker uit.

if ((var1 == FOO) && ((var2 == BAR) || (var2 == FOOBAR))) Proportioneel lettertype

if ((var1 == FOO) && ((var2 == BAR) || (var2 == FOOBAR))) Niet-proportioneel lettertype

Vaak wordt geschreven code ook door verschillende programmeurs uitgewisseld. Het is niet ongebruikelijk dat verschillende personen aan hetzelfde document werken, of van hetzelfde document gebruik maken. Door een niet-proportioneel lettertype te gebruiken blijft de structuur van een document vaak overeind staan, desondanks dat verschillende programmeurs met verschillende instellingen en schermresoluties werken. Omdat al deze voordelen tegenwoordig onmisbaar zijn geworden in het schrijven van code, zal ons ideale lettertype niet-proportioneel moeten zijn. Serif of Sans-serif

Serif, ook wel schreef is een kleine lijn

Sans-serif, ook wel schreefloze letters. Beter

bevestigd aan het einde van de ‘pootjes’ van

leesbaar op klein formaat, omdat schreven als

letters. Dit geeft letters een grotere vormvari-

storend ervaren kunnen worden wanneer klein

atie waardoor deze meer onderscheidend van

afgebeeld. Door het lettertype te verkleinen

elkaar raken. De herkenbaarheid van letters

passen er meer karakters op een beeldscherm.

neemt toe waardoor deze minder snel verward worden met andere letters. Binnen de typografie wordt er vaak gesproken over serif of sans-serif. Desondanks vele argumenten voor de leesbaarheid van beide soorten lettertypes, is nooit uit onderzoek gebleken welke soort de leesbaarheid het beste bevorderd. Het belangrijkste argument voor gebruik van serif lettertypes is dat de dwarsstreepjes de onderscheiding van verschillende karakters zou verbeteren. Uit mijn onderzoek is gebleken dat sans-serif lettertypen duidelijker leesbaar zijn op computerschermen. Dit komt doordat serifs vervagen (vooral op klein formaat) omdat de dpi (dots per inch) waarde van huidige computerschermen niet genoeg detail kunnen weergeven. Voor programmeurs is de leesbaarheid van een lettertype op hun scherm erg belangrijk. Daarnaast werken zij graag op een klein formaat, om zoveel mogelijk karakters op een regel kwijt te kunnen.

Vergelijkbare karakters Een belangrijk aspect van ons lettertype is de leesbaarheid van verschillende karakters. Deze leesbaarheid is te definiëren als: karakters zijn groot en verschillend genoeg voor de lezer om onderscheid te maken tussen afzonderlijke woorden en / of tussen letters. Vooral het onderscheid maken tussen letters is binnen de wereld van codering een probleem dat ik tijdens mijn onderzoek vaak terug heb horen komen. Wanneer bijvoorbeeld twee letters erg op elkaar lijken en de programmeur heeft een typefout gemaakt, kan het erg lastig zijn om deze fout terug te vinden. Veel voorkomende probleemgevallen:

j i l 1 I

j i l 1 I

o O 0

o O 0

g q y

g q y

z 2 Z

z 2 Z

s 5 S

s 5 S

8 B

8 B

C G 6

C G 6

D O

D O

u v

u v

Anonymous Pro

Source Code Pro

j i l 1 I

j i l 1 I

o O 0

o O 0

g q y

g q y

z 2 Z

z 2 Z

s 5 S

s 5 S

8 B

8 B

C G 6

C G 6

D O

D O

Droid Sans Mono

Consolas

j i l 1 I

j i l 1 I

o O 0

o O 0

g q y

g q y

z 2 Z

z 2 Z

s 5 S

s 5 S

8 B

8 B

C G 6

C G 6

D O

D O

DejaVu Sans Mono

Courier

Er zijn verschillende oplossingen te bedenken om de differentiatie van de karakters te vergroten. De karakters ‘ j i l 1 I ‘ kunnen worden aangevuld met schreven zodat zij minder veel op elkaar lijken. Het karakter ‘ 0 ‘ kan schuin worden doorstreept, of kan worden aangevuld met een punt in het midden, zodat deze minder op het karakter ‘ O ‘ lijkt. Hieronder een aantal voorbeelden tussen het verschil van de 0 en de O, weergegeven in de eerder gevonden lettertypen.

0O Anonymous Pro

0O

0O

0O

0O

0O

Droid Sans Mono

DejaVu Mono Sans

Source Code Pro

Consolas

Courier

De andere gevallen veroorzaken vaak pas problemen wanneer het lettertype op klein formaat wordt gebruikt. Programmeurs vinden het vaak fijn om in klein formaat te werken zodat er meer karakters op een regel code passen. Het is gebleken dat een grotere X-hoogte van karakters, de leesbaarheid op klein formaat verhoogt. Hoewel het ontkenbaar is dat deze oplossingen de leesbaarheid van de karakters vergroten, blijft het een kwestie van persoonlijke voorkeur welke oplossing het beste is. Het zou daarom een enorme toevoeging zijn als het lettertype aangepast kan worden op persoonlijke voorkeuren. Je kan dan bijvoorbeeld kiezen of je wilt dat het karakter ‘ 0 ‘ schuin wordt doorstreept, of dat er een punt in het midden van de ‘ 0 ‘ staat. Wil je schreven gebruiken op de letter ‘ I ‘ of juist op de letter ‘ L ‘? Dit zou een kort proces zijn van eenmalig de karakters met voorkeur te selecteren. Vervolgens heeft de programmeur een lettertype met onderscheidbare karakters naar zijn of haar voorkeur. Speciale karakters Tijdens het coderen gebruikt een programmeur veel meer dan alleen letters. Er zijn veel aanvullende karakters die binnen verschillende programmeer talen veel gebruikt worden. Bekende karakters zijn de verschillende haakjes: ‘ < ( { [ ] } ) > ‘. Het heeft voor programmeurs de voorkeur wanneer deze haakjes zowel horizontaal als verticaal uitlijnen. Hetzelfde geldt voor veel gebruikte wiskundige symbolen zoals: ‘ - + * = ‘. Dit zorgt ervoor dat de karakters in hun context makkelijker als een geheel te zien zijn. Naast de haakjes mogen de volgende veel voorkomende karakters niet in ons ideale lettertype ontbreken: ‘ & @ % $ # ‘.

< ( { [ ] } ) >

< ( { [ ] } ) >

- + * =

- + * =

& @ % $ #

& @ % $ #

Anonymous Pro

Source Code Pro

< ( { [ ] } ) >

< ( { [ ] } ) >

- + * =

- + * =

& @ % $ #

& @ % $ #

Droid Sans Mono

Consolas

< ( { [ ] } ) >

< ( { [ ] } ) >

- + * =

- + * =

& @ % $ #

& @ % $ #

DejaVu Mono Sans

Courier

Tijdens de ontwikkeling van lettertypes krijgen deze karakters vaak de minste aandacht. Zij worden vaak achteraf nog snel toegevoegd. Echter in programmeer talen hebben deze karakters vaak een belangrijke betekenis. Het is daarom essentieel dat deze karakters niet ontbreken en met dezelfde aandacht worden uitgewerkt binnen ons ideale lettertype. Ook interpunctietekens zoals ‘ . , ‘ “ : ; ‘ zijn erg belangrijk binnen de dagelijkse werkzaamheden van een programmeur. Deze karakters kunnen erg op elkaar lijken op een kleiner formaat. Het is daarom erg belangrijk dat deze onderscheidend worden vormgegeven. Want hoewel het uiterlijk van deze tekens erg vergelijkbaar zijn, kunnen zij in betekenis enorm verschillen. Binnen ons ideale lettertype zullen al deze genoemde karakters aanwezig moeten zijn, onderscheidend worden vormgegeven en zowel horizontaal als verticaal uit moeten lijnen.

Conclusie Aan de hand van de besproken punten zijn de volgende guiding principles voor het maken van een ideaal lettertype voor programmeurs op te stellen: Monospace, het lettertype is niet-proportioneel en bevordert daarmee de leesbaarheid op karakter-niveau. Daarnaast kan er met een monospace lettertype een 2-dimensionale structuur binnen documenten gecreëerd worden die de productiviteit van de programmeur verhoogt. Sans-serif, het lettertype bevat voornamelijk schreefloze karakters. Schreefloze karakters worden met simpele vormen ontworpen en blijven daarom beter leesbaar op een kleiner formaat. Daarnaast verliezen deze schreefloze karakters minder detail wanneer afgebeeld op computerschermen. Vergelijkbare karakters, hebben voldoende mate van differentiatie. Dit kan worden bereikt door het toevoegen van schreven, doorstrepen, punten en voldoende X-hoogte van karakters. Het ideale lettertype biedt een functie waarbij de programmeur zijn voorkeur van verschillende karakters kan instellen. Speciale karakters, zoals haakjes, (wiskundige) symbolen en interpunctietekens mogen niet ontbreken. Deze karakters hebben vaak een belangrijke betekenis binnen programmeer talen. Zij moeten daarom duidelijk van elkaar verschillen en ook op klein formaat onderscheidend zijn. Daarnaast moeten de haakjes en wiskundige symbolen zowel horizontaal en verticaal uitlijnen.

Bronnen Zhang, Y (2006). The effect of font design characteristics on font legibility. Computer Science, Concordia

University, Montreal.

Kole, S (2013). Serif vs. Sans: the final battle. Geraadpleegd op: 8 december 2014, van

http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

Poole, A (2008). Which are more legible: serif or sans serif typefaces? Geraadpleegd op: 9 december 2014,

van http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

Juhász, I (2011) Programming languages. Geraadpleegd op: 12 december 2014, van

http://www.inf.unideb.hu/kmitt/konvkmitt/programming_languages/book.xml.html#id410504/ Benjamin, D (2009) Top 10 programming fonts. Geraadpleegd op: 4 december 2014, van http://hivelogic.com/articles/top-10-programming-fonts Giltsoff, J (2014) 10 fonts for code. Geraadpleegd op: 4 december 2014, van

http://typecast.com/blog/10-fonts-for-code Rijksen, N (2014) Best coding fonts. Geraadpleegd op: 7 december 2014, van http://komodoide.com/ blog/2014-07/best-coding-fonts Internetbronnen: http://www.marksimonson.com/fonts/view/anonymous-pro https://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1960 http://blog.typekit.com/2012/09/24/source-code-pro/ http://www.droidfonts.com/info/droid-sans-mono-fonts/ http://www.microsoft.com/typography/fonts/family.aspx?FID=300 http://dejavu-fonts.org/wiki/Main_Page

Het ideale font voor programmeurs

Recommend Documents