Het ideale font voor programmeurs

Vergelijkbare documenten
Het ideale font voor programmeurs

Design Theorie voor 3-ICT Vormen en Afmetingen

Design & Ontwerp Theorie voor klas 3. 1 Vormen & Afmetingen. 1.1 Zijn Vorm & Afmetingen al vastgesteld? 1.2 De Printer. 1.

Stanley Sterken Mv1D taak 1.2.A4 - typografie boekje. bronnen:

VMG BEELD- SCHERMTY- POGRAFIE. Methodiek. diverse media onder de loep

Hoofdstuk 4: Eenvoudige opmaak van alinea s

Handleiding teksteditor

VOOR VERBETERING VATBAAR. Nadia Groenewald G&IB

OPDRACHTEN. aandacht aan de vormgeving. slecht 2 à 3 lettertypes. (cursief) wel. CRITERIA. INLEVERWIJZE Analoog. DEADLINE Einde volgende les

Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop.

Typografie. Hoe typografie toepassen

Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel

Het ontwerpen van een poster

Hoe heb ik de opdracht uitgevoerd?

Huisstijlhandboek JPcommunication

Uitleg over ons design programma

CVI LESBRIEF Versie 1.4 (april 2018) Leesbaarheid

STROOMDIAGRAMMEN. Hoofdstuk 8. Hoe je Galgje moet spelen. Voorbeelduitvoer van Galgje. Hoofdstuk 8 Stroomdiagrammen 67

L A TEX-cursus week 6 (Handleiding)

Beginnen met de kaart

Inleiding. Vooronderzoek

Ontwerp en zetoefening in Indesign 2.0 Oefening oefening met als thema: Het naamkaartje.

Dyslexie font digitale handleiding PARTICULIER

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO

Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ

Inhoudsopgave. Inleiding

Whitepaper. design best practices

Leerlingdossier & handelingsplannen

Handleiding wordpress

TOEGANKELIJKE LEERMIDDELEN MAKEN

De onzichtbare grens van online privacy. Essay

HUISSTIJLHANDBOEK LIVING CTIVE

Sabeth van der Voort GAR1B 03/10/2014< Grafische interface Docent: Leon Kranenburg

Cursus SKOOLBORD ART. Rolf Dingerink

10 TIPS VOOR EEN BETER OPVALLENDE RECLAME

Web Usability. Byte seminar, 23 november Door: Gwyneth Ouwehand

Digitaal printen binnen Grafimedia VMBO. Opdracht

Design Document Catalyst

Wegwijzer: Je ontwerp opmaken

HANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014

Grafisch ontwerp. Referenties.

PAGINA BEHEER. Heel belangrijk is dat u niet vergeet op te slaan anders gaan al uw wijzigingen verloren, deze knop vind u bovenin de pagina!!!

make things ETA by Boudewijn Naaijkens

Cover Page. Author: Bessemans, Ann Title: Letterontwerp voor kinderen met een visuele functiebeperking Issue Date:

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).

Handleiding Macromedia Contribute

Luna 3.0 Basishandleiding

Van persona s en scenario s naar wireframes. Lay-out met grid

Handleiding Word 2010

Posters maken in PowerPoint

ActiveBuilder Handleiding

Les 1. Digitale Media - DTP 1

Tekst toevoegen in Layout & Editing. Klik op de knop Tekst. De naai eigenschappen balk verschijnt en stel dit in zoals u de letters wenst

Courbois Software WebDesignEditor. WYSIWYG-Editor

Beter kantoorinnovatie

OPDRACHTKAART. Thema: Prepress. InDesign 5. Letterproef PP Voorkennis: De praktijkopdrachten 1, 2, 3 en 4 van InDesign afgerond

Workshop Uitleg. Code, Processing, Box Adventure en meer. Laat je leerlingen spelendwijs kennismaken met coderen

gut feeling BRANDBOOK

Werkstuk of verslag. de vormvoorschriften

Opdracht 1 PERSONALIA

Wijzigingen Antivirus in 2008

INHOUD. Logo. Typografie. Kleurenpalet. Visitekaartje. Briefpapier. Advertentie. Header. Homepage. Gadget

Algemene regels. Stappenplan webdesign

Letters deel 2 fonts en fontmanagers. Handleiding van Helpmij.nl. Auteur: Kate95

1. Teksten maken en bewerken

PDF-instructies. Opmaakinstructies Proefschriften. Geachte promovendus,

Online banner ontwerp via UBA website

HUISSTIJLGIDS mei 2014

Linda Thuijs-Koopmans - LinnenArt, huisstijl en logo ontwerp -

Posters maken in PowerPoint

Tijdsplanning werkstuk groep 5

Project Het Parool. Media, Informatie en Communicatie. Propedeuse. Ontwerpdocument Beeld

Waarom ga je schrijven? om de directeur te overtuigen. Wat voor tekst schrijf je? een overtuigende tekst. Voorbereiden van je overtuigende tekst

BASISELEMENTEN. woordmerk, beeldmerk, kleur, typografie

Gebruiksvriendelijkheid. Introductie. Onderwerpen Student Informatiekunde Universiteit Utrecht. Webdesigner Piozum

VAARDIGHEDEN EXCEL. MEETWAARDEN INVULLEN In de figuur hieronder zie je twee keer de ingevoerde meetwaarden, eerst ruw en daarna netjes opgemaakt.

Gebruikershandleiding Edit

Vormgeving voor beeldscherm:

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders

Monks DESIGN CHECKLIST

Wat ga je schrijven: een verklarende tekst. Voorbereiden op het schrijven: een film bekijken

Gebruiksaanwijzing AMS Labelmaker Versie 2.0

A4-breedte Afdrukstand. Auto HR bij NR Pitch Auto NR bij HR Puntformaat Lettertypenaam Symbolenset Lettertypebron Lade-nr wijzigen Regels/pagina

Meer Winst Met Je Website MEER WINST MET JE WEBSITE!

Handboek huisstijl ideal QR

Indesign. Pencil - Achtergrond - Visie - Keuzes - Onderbouwing - Toepassing. Photoshop - Achtergrond - Toepassing. Vincent Damen

Huisstijlhandboek. Voor vragen of meer info: pagina

Lesbrief: Slimme oplossingen Thema: Mens & Dienstverlenen in de toekomst

Examen Programmeren 2e Bachelor Elektrotechniek en Computerwetenschappen Faculteit Ingenieurswetenschappen Academiejaar juni, 2010

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11

Inhoudsopgave. Inleiding. Wat is een infographic. Voordelen van een infographic

HTML-EDITOR GEBRUIKEN

2. Syntaxis en semantiek

Marleen Muller, Kunst & Techniek 2

Aanleverspecificaties

PHP. Les 4 : Variabelen

Je gaat leren programmeren in Ruby. En daarna in Ruby een spelletje maken. Websites zoals Twitch en Twitter gemaakt zijn met behulp van Ruby?

Art and windmills. Doelgroep onderzoek. Valérie den Besten G&I A

MMIO Verslag. Groepsopdracht week 1. Hoe zorgen we dat kinderen van jongs af aan gezonder leren eten?

Transcriptie:

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

Menig programmeur leest en schrijft dagelijks duizenden regels aan code. Opvallend is dat zij vaak werken met het lettertype dat standaard is ingesteld in hun tekstverwerker. Deze lettertypes zijn meestal voor andere doeleinden gecreëerd. Een programmeur wil snel door zijn code heen kunnen scannen, hij wil makkelijk aanpassingen kunnen maken en misschien nog wel belangrijker, hij wil zo weinig mogelijk fouten maken tijdens het schrijven van zijn code. Het gebruikte lettertype bepaald mee aan de efficiëntie van deze processen. Er zijn verschillende pogingen gedaan naar het maken van een lettertype specifiek voor codering. Echter is er nog steeds geen lettertype dat bij uitstek wordt gebruikt door programmeurs. Waar zou een ideaal lettertype voor programmeurs aan moeten voldoen? Monospace Codering wordt meestal geschreven in monospace. Monospace is een omschrijving voor nietproportionele lettertypes. Dat wil zeggen dat elk karakter en elke spatie dezelfde breedte op het scherm omvat. Deze eigenschap heeft verschillende voordelen binnen het lezen en schrijven van code. 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. 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. 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. 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 Binnen de typografie wordt er vaak gesproken over serif of sans-serif. Serif lettertypes bevatten dwarsstreepjes (ofwel schreven) aan het uiteinde van de horizontale en verticale balken van karakters. Sans-serif lettertypes bevatten juist schreefloze karakters. 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. Een argument voor sans-serif lettertypes is te vinden binnen de huidige dpi (dots per inch) waarde van computerschermen. Deze dpi waarde bepaald de mate van detail van karakters. De dpi waarde bepaald uit hoeveel pixels elk karakter kan bestaan. Omdat sans-serif lettertypes ontworpen worden met simpele vormen, komen deze beter naar voren op computerschermen. Serif lettertypes kunnen slechter leesbaar zijn wanneer de details van de karakters wegvallen op het computerscherm. Voor programmeurs is de leesbaarheid van een lettertype op hun scherm erg belangrijk, waardoor de voorkeur bij sans-serif lettertypes ligt. 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. De meest voorkomende probleemgevallen zijn: j i l 1 I o O 0 g q y z 2 Z s 5 S 8 B C G 6 D O u v 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. 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: & @ % $ #. 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