Kromatiska typsnitt och plattdesign
Webens ökande infatuation med platt design har lett till en snabb avvisning av artifice som drop shadows, till förmån för ett renare mer formbaserat utseende. Men detta lämnar konstruktören ett problem: hur stämmer du stilen för att vara livlig samtidigt som du följer planerna för plattdesign?
En lösning är det förnyade intresset för kromatiska teckensnitt. I utbredd användning i 19-talets träblockstryck använder kromatiska ansiktsytor flera färger för att definiera olika områden. Det här är det polära motsatta tillvägagångssättet till modern logotyp, där vi lär oss att former måste fungera i en enda ton.
Fördelen med kromatiska mönster är att de lägger till djup, betoning och karaktär. utan behov av mer påträngande textdekorationer som skuggor.
Ett av de bästa exemplen på detta är Sodachrome. Designad av Dan Rhatigan och Ian Moore består Sodachrome av två separata teckensnitt; en där serifs pekar åt vänster och en där de pekar åt höger. Individuellt sett ser de två tecknen ut tydligt obalanserade, men läggs över varandra i olika färger, de ger en attraktiv platta. Den extra fördelen med Sodachrome är att överlappningen mellan de två färgerna skapar ett tredje ansikte, en modern sans-serif, i hjärtat av designen. Visuellt intresse för Sodachrome skapas av samspelet mellan dessa tre olika mönster.
Sodachrome av Dan Rhatigan och Ian Moore.
Att utveckla kromatiska typsnitt för användning på webben är något av en utmaning. Medan design som Lisa Lonergans Knoxville följ mycket traditionella romerska konturer, mönster som Mark Frömbergs Pigment - som har 600 tecken - passar inte lätt in i vektorformatformat.
Knoxville av Lisa Lonergan.
Pigment av Mark Frömberg.
Teckensnitt, även grunge-stiliga ansikten, är utformade som en skiss. Skisserna kan skalas, färgas och fördelas, men designern väljer. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) och nästan alla andra tillgängliga format fungerar på så sätt. Det betyder att en kromatisk design inte kan specificeras i en enda fil. Men förutsatt att den kromatiska typsnittet levereras som två separata teckensnittfiler kan vi laga en över varandra ganska enkelt.
CSS tillåter även att vi duplicerar titeln i stilerna med innehållsegenskapen och undviker att fördubbla innehållet i markeringen som skulle ha en negativ inverkan på SEO och tillgänglighet.
Grundformatet är:
Any old title
Och i 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";}För närvarande är bristen på kromatiska teckensnitt som produceras för webbanvändning sannolikt att deras användning är ett steg för långt för webbplatser som bloggar som kräver många rubriker. Men för logotyper eller rubriker som sällan ändras, där användandet av en bild är acceptabel, är kromatiska teckensnitt ett pulserande och engagerande sätt att ställa in typ som bibehåller en platt estetik.
Har du arbetat med kromatiska teckensnitt? Vilka tekniska problem uppstod du? Låt oss veta i kommentarerna.