Chromatische lettertypen en plat ontwerp
De toenemende verliefdheid van het web met een plat ontwerp heeft geleid tot een snelle afwijzing van kunstgrepen zoals slagschaduwen, ten gunste van een schoner, meer op vormen gebaseerd uiterlijk. Maar dit laat de ontwerper met een probleem: hoe stijl je stijl om levendig te zijn terwijl je vasthoudt aan de principes van een plat ontwerp?
Een oplossing is de hernieuwde belangstelling voor chromatische lettertypen. In wijdverspreid gebruik in de houtblokken uit de 19de eeuw, gebruiken chromatische lettertekens meerdere kleuren om verschillende gebieden te definiëren. Dit is de tegenovergestelde benadering van modern logo-ontwerp, waarin ons wordt geleerd dat vormen op één toon moeten werken.
Het voordeel van chromatische ontwerpen is dat ze diepte, nadruk en karakter toevoegen; zonder de behoefte aan meer opdringerige tekstdecoratie zoals schaduwen.
Een van de beste voorbeelden hiervan is Sodachrome. Sodachrome is ontworpen door Dan Rhatigan en Ian Moore en bestaat uit twee afzonderlijke lettertypen; een waarin de schreef naar links wijst en een naar rechts. Individueel instellen de twee lettertypen zien er duidelijk uit balans, maar over elkaar heen gelegd in verschillende kleuren, ze produceren een aantrekkelijke slab-serif. Het bijkomende voordeel van Sodachrome is dat de overlapping tussen de twee kleuren een derde gezicht creëert, een moderne schreefloze, die de kern vormt van het ontwerp. De visuele interesse in Sodachrome wordt gecreëerd door het samenspel tussen deze drie verschillende ontwerpen.
Sodachrome van Dan Rhatigan en Ian Moore.
Het ontwikkelen van chromatische lettertypen voor gebruik op het web is een beetje een uitdaging. Overwegende dat ontwerpen zoals Lisa Lonergan's Knoxville volg zeer traditionele Romeinse contouren, ontwerpen zoals Mark Frömberg's Pigment - met 600 tekens - past niet gemakkelijk in vectorindelingen.
Knoxville door Lisa Lonergan.
Pigment van Mark Frömberg.
Letterbeelden, zelfs gezichten in grunge-stijl, zijn ontworpen als een omtrek. De contouren kunnen worden geschaald, gekleurd en uit elkaar geplaatst, maar de ontwerper kiest. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) en bijna elk ander beschikbaar formaat werken op deze manier. Dit betekent dat een chromatisch ontwerp niet in één bestand kan worden opgegeven. Als het chromatische lettertype echter wordt geleverd als twee afzonderlijke lettertypebestanden, kunnen we elkaar vrij eenvoudig over elkaar leggen.
CSS staat ons zelfs toe om de titel in de stijlen te dupliceren met behulp van de content- property, waarbij een verdubbeling van de content in de markup wordt vermeden, wat een negatieve impact zou hebben op SEO en toegankelijkheid.
Het basisformaat is:
Any old title
En in de CSS:
h1{font-family:"Some Chromatic Font A";color: rgba(50, 0, 0, 0.5);position:relative;}h1:after{font-family:"Some Chromatic Font B";color: rgba(0, 50, 50, 0.5);position:absolute;left:0;content:"Any old title";}Voorlopig betekent het ontbreken van chromatische lettertypen die voor webgebruik worden geproduceerd waarschijnlijk dat hun gebruik een stap te ver is voor sites zoals blogs die tal van headers vereisen. Maar voor logo's of koppen die zelden veranderen, waarbij het gebruik van een afbeelding acceptabel is, zijn chromatische lettertypen een levendige en boeiende manier om het type in te stellen dat een platte esthetiek behoudt.
Heb je gewerkt met chromatische lettertypen? Welke technische problemen ben je tegengekomen? Laat het ons weten in de comments.