In m’n vorige blog schreef ik uitgebreid over lettertypes en hun geschiktheid voor het web. Deze blog is daarop een uitbreiding met meer aandacht voor mogelijke combinaties. Door reguliere lettertypes te combineren met bijvoor­beeld een mooie italic, een lettertype uit een andere familie of met een bij­zondere ampersand introduceer je sierlijkheid en subtiele afwisseling in je website.

Italics voor koppen & quotes

Het verschil tussen italic en oblique is vaak verwarrend. Word processors maken geen verschil tussen beide. Je zet een letter scheef door op de knop ‘i’ van italic te klikken. Maar een italic is niet zomaar een scheve versie van een lettertype. Het is een heel ander soort type letter, die ontworpen of gekozen is zodat hij optimaal aansluit op de reguliere versie. Een oblique is een betere term voor ‘scheve versie van een lettertype’. Dit is namelijk het oorspronkelijk lettertype zorgvuldig onder een bepaalde hoek gezet. De italic letter ziet er meer, dan de oblique en roman, als hand-geschreven uit en is door z’n sierlijkheid veel mooier en eleganter dan een oblique.

Typografen gebruikten vroeger niet of nauwelijks italics en romans in dezelfde tekst. Het doet ook eerder denken aan het gebruik van twee verschillende lettertypefamilies als voor bijvoorbeeld koppen en bodytekst. Belangrijk dus dat ze goed bij elkaar passen en elkaar versterken.

Italic and roman lived quite separate lives until the middle of the sixteenth century. Before that date, books were set in either roman or italic, but not in both. In the late Renaissance, typographers began to use the two for different features in the same book. Typically, roman was used for the main text and italic for the preface, headnotes, side notes and for verse or block quotations. The custom of combining italic and roman in the same line, using italic to emphasize individual words and mark specific classes of information, developed in the sixteenth century and flowered in the seventeenth.

Robert Bringhurst, 2008, The Elements of Typographic Style 3.2, p.57.

Het aantal lettertypes verandert er niet door maar historisch gezien zijn roman en italic dus op zichzelf staande lettertypes hoezeer ze ook bij elkaar lijken te horen. Maar door deze achtergrondkennis krijg je als webontwerpen wel meer vrijheid in het gebruik van lettertypes voor koppen (e.g. Georgia italic en Palatino italic). Je kan nog verder gaan met typografisch spelen. De aanwezigheid en elegantie van mooie italics kan dus toepasselijk zijn om koppen of kleine stukken bodytekst (e.g. quotes) op een subtiele manier extra identiteit te geven. Voor lange bodyteksten is een italic uiteraard te ver­moeiend omdat de letters ervan te aanwezig zijn en afleiden van de inhoud.

Verschillende lettertypes voor koppen en body

Combineren van verschillende lettertypes – denk bijvoorbeeld aan serif en sans-serif – doe je uiteindelijk op je gevoel. Als regel kan je ervan uitgaan dat het belangrijk is dat de binnenste vormen van de letters op elkaar moeten lijken. Een geometrisch lettertype past goed bij een romantische roman, beide zijn erg ‘meetkundig’ weergegeven. Een humanistische sans-serif past weer beter bij bijvoorbeeld een renaissance lettertype.

Pair serifed and unserifed faces on the basis of their inner structure.Robert Bringhurst, 2008, The Elements of Typographic Style 3.2, p.105.

Combineren is niet aan te ontkomen als een lettertype alleen geschikt is voor bodytekst (book type) of juist alleen voor koppen (display type). Goede com­bi­naties zorgen voor een interessant en toch evenwichtig beeld. Door het kleine aantal geschikte web-lettertypes, zijn er maar weinig com­bi­natie­mogelijkheden. In tabel 1 heb ik mogelijke combinaties aangegeven en gewaardeerd. Voor meer informatie en achtergrond over de individuele font-stacks verwijs ik je naar mijn eerdere blog.

Combineren kan ook nodig zijn zodra er geen oblique of italic versie van een lettertype bestaat en je deze toch nodig hebt. Lucida Grande is zo’n letter­type, deze heeft geen oblique of italic. Zodra je deze toch met css als italic of oblique forceert, zal de webbrowser zelf het lettertype in een standaard hoek neerzetten met een onaantrekkelijk resultaat, want alle vormen zijn niet meer op elkaar afgestemd zoals bij een nauwkeurig ontworpen oblique of italic. Beter is om zo’n lettertype dus te combineren met een oblique of italic van een ander lettertype, bijvoorbeeld van Lucida Sans, Trebuchet MS of zelfs Georgia.

Alternatieve Ampersands in Koppen

Een manier om extra sierlijkheid in je koppen te brengen is door een bijzondere ampersand te kiezen. De mooiste ampersands zitten meestal verstopt in de italic versies van een aantal serif lettertypes, zoals Baskerville, Bell MT, Goudy Old Style en Palatino.

In heads and titles, use the best available ampersand. Robert Bringhurst, 2008, The Elements of Typographic Style 3.2, p.78.

Een font stack voor een alternatieve en gestileerde ampersand kan er als volgt uitzien.

Baskerville; Bell MT; Goudy Old Style; Palatino; Palatino Linotype; Book Antiqua; URW Palladio L; Palladio; Constantia:

Indien de voorkeur uitgaat naar een meer klassieke ‘renaissance’ ampersand, kies dan de volgende font stack.

Adobe Garamond Pro; Adobe Garamond; Garamond Premier Pro; Garamond Premier; Hoefler Text; Garamond; Palatino; Palatino Linotype; Book Antiqua; URW Palladio L; Palladio; Constantia:

Het is verstandig om je standaard font-stack voor koppen hier direct achter te zetten. Zodra geen van de fonts in de ‘ampersand font-stack’ gevonden worden zal de ampersand het lettertype van de omliggende woorden over­nemen. Vergeet niet om de ampersand in italic te zetten.