31 mei, 2022

Halfvet #89 – The Font Matrix

KICKOFF

Yeah let's take the red pill

Wie vindt het soms lastig om lettertypes te combineren 🙋‍♂️? Eigenlijk check ik vaak alleen of de x-hoogtes gelijk zijn en is het voor de rest vooral onderbuikgevoel. Veel mensen vinden font pairing lastig, want waar moet je op letten?

Oliver Schöndorfer is een Oostenrijkse UI-designer/typograaf en heeft een methode ontwikkeld die het makkelijker maakt om lettertypes te kiezen die bij elkaar passen. Hij noemt het de Font Matrix en de theorie is gebaseerd op het werk van Indra Kupferschmid. Ik vond het erg verhelderend allemaal.

Oliver legt z'n methode uit in deze video, en ik doe mijn samenvatting daaronder:

Font Matrix – See and Pair Typefaces Like Never Before

Lettertypes worden vaak gecombineerd op basis van categorieën. Bijvoorbeeld schreef combineren met schreefloos - maar die twee categorieën zijn enorm breed en erbinnen zijn veel verschillen. Of je combineert op basis van historische classificaties - maar dat is vaak onpraktisch en verwarrend (Bodoni uit 1786 wordt Modern genoemd en Times New Roman uit 1931 wordt Transitional Old Style genoemd 🤔).

Daarom heeft Indra Kupferschmid een nieuwe manier bedacht om lettertypes te categoriseren. Niet gebaseerd op type history maar op visuele kenmerken. Hierdoor zul je zien dat Helvetica en Bodoni een echt liefdeskoppel zijn terwijl ze honderden jaren in leeftijd verschillen ❤️

Hoe het werkt? Kies op basis van visuele kenmerken een van de opties binnen de volgende drie onderwerpen:

Vorm

De vorm is dynamisch: de letter heeft open vormen en de letterhoek (the stress) is diagonaal
De vorm is rationeel: de letter heeft gesloten vormen en de letterhoek (the stress) is verticaal
De vorm is geometrisch: de letter heeft geometrische vormen

Schreven

De letter heeft schreven
De letter is schreefloos

Contrast

De letter heeft veel contrast, dus veel verschil tussen dikke en dunne delen
De letter heeft weinig contrast, dus weinig verschil tussen dikke en dunne delen

Samen maakt dat de Font Matrix:

Nu we een praktischere manier hebben om lettertypes te categoriseren, kunnen we ze makkelijker pairen. Vuistregels bij bovenstaand overzicht: lettertypes in dezelfde verticale kolom combineren mooi met elkaar; lettertypes in dezelfde horizontale rij combineren slecht met elkaar. Et voilà!

En daarom houden Helvetica en Bodoni dus van elkaar!

Lees de uitgebreide versie in Oliver’s blogpost. Of doe mee aan de online course over dit onderwerp die hij gisteren is gestart.

READING LIST

The Era of Rebellious Web Design Is Here

Code and Theory ontwierp een aantal titels van online publisher BDG (oa. Gawker) in een verfrissende speels-rauwe stijl. Heel interessant hoe die stijl is ontstaan als tegengif tegen het cleane Bootstrap UI.

eyeondesign.aiga.org

Naming colors in design systems

Een lading handig tips over naamgeving van kleuren in design systems. Door een designer bij Adobe, dus die zal het wel weten :)

adobe.design

Spotify’s Embodiment Of Emotional Design

Spotify blijft een interessante design case. In dit artikel wordt het UI/UX beoordeeld aan de hand van Don Norman’s Emotional Design principes.

raw.studio

Interactive Typography Tutorial

Dit is zo tof gedaan! Verbeter je typografische skills met deze interactieve tutorial. In 5 minuten maak je van een niet-ontworpen tekst een goed-ontworpen tekst, door aan allerlei sliders te trekken zoals lettergrootte, regellengte, interlinie, marges enz.

learnui.design

CONFIG 2022

Figma heeft de video’s van alle sprekers op Config 2022 online gezet. Het zijn er meer dan 70; ik heb deze drie bekeken:

Design systems are flawed (José Torre)

Join José for a story about design systems and gardening. First, he will break some misconceptions about the design systems role in the world of product design, using his perspective as a craft leader working on one of the most well respected systems in the industry: Shopify Polaris.

www.youtube.com

How we internationalized our typography stack (Francesco Cutolo)

As Klarna skyrocketed with expansion in non-Latin markets, the team had to rethink from scratch typography in their products moving to system font stack and swap it in their design system—in this talk, Francesco will talk about how they did that.

www.youtube.com

Think outside of the Frame (Fons Mans)

In this talk, Fons will talk about his creative process and the role Figma plays in it.

www.youtube.com

MUST: JOCHEM LEEGSTRA

Jochem is Halfvetter, snelle denker, snelle prater, maar geen snelle jongen. Daarnaast founder & creative director van …,staat.

Inspirerend design festival:

Meerdere, maar twee die er voor mij uitspringen: inhoudelijk sterk én verrassend is zeker ons Nederlandse What Design Can Do. Deze conferentie zit zo goed op het nut van design en creativiteit. In letterlijk alle werelden. Raakte me emotioneel ook echt. En gaat veel verder dan de vaak gekozen design-kant van design.

Iets totaal anders qua vibe, opzet, energie, lokatie, aantal sprekers en de algehele creatieve context (én goed eten) is USBYNIGHT in Antwerpen. Onder leiding van gastheer en 3D-artist Rizon Parein. Meer een echt festival. Zoals de naam al zegt is het festival niet overdag. Helpt ook. Besef me opeens hoeveel we de festivals en conferenties hebben moeten missen de afgelopen 2 jaar…

Een side project waar ik super trots op ben:

We doen dit gelukkig vaker met ons team. Ik wilde hier eerst de …,staat stoel 🪑 noemen of ons voormalige @newwerktheater. Maar, wegens de Halfvet-lezers toch maar iets meer digitaal deze keer ;-) Helemaal aan het begin van de Corona-periode hebben we Gotyourback opgezet. Een plek waar je je backdrop voor je Zoom of andere videoconference app kan downloaden. Beelden van meer dan honderd fotografen, ontwerpers, animatoren, visual artists en musea… Van Rijksmuseum en Serpentine Gallery tot Nobuyoshi Araki, Piet Oudolf, Sabine Marcelis, Jordy van den Nieuwendijk en Patta.

Boek dat ik iedereen kan aanraden:

Om aan te sluiten bij de vorige vraag en meteen deze te beantwoorden (met nieuws!): we zijn bezig met The New Stijl. Een boek, een heel dik boek, 550+ pagina’s over Nederlandse creativiteit in de breedste zin van het woord. Met heerlijk werk van meer dan 50 topcreatieven is dit boek wel aan te raden. Het begon als een designboek, maar al snel gingen we via fotografie, digitaal, design, kunst, mode, architectuur tot ruimtelijk …en alles wat daar tussen zit. Omdat we een platform missen waar dit allemaal samen komt. Wie maken en zijn eigenlijk ‘the new Stijl’? Dit boek zit al zo’n 7 jaar in m’n hoofd en we gaan het nu samen met MENDO uitgeven, eind van deze zomer. Bijna in de pre-order ;-) Het is niet alleen een boek. We gaan er een online platform van maken, met daarnaast een paar te lange podcasts en we poppen op op (inter)nationale events.

TOOLS

Shift

Switchboard maakt remote samenwerken makkelijker door de videocall en alle tools in één omgeving te plaatsen.
Logo Archive is een community die je toegang geeft tot een rijk archief van logo’s.
Loops zijn abstracte, high quality 3D blobs die loopen.
Accessible Social zijn tips over hoe je social content toegankelijk maakt voor zoveel mogelijk mensen.
ClipDrop verwijdert de achtergrond van foto’s.
Wireframe.cc is een online wireframe tool.
Brand Site Design verzamelt brand manuals en design systems van bekende merken.
Shift maakt van een svg of een tekst een customizable 3D object.

All caught up.

Vandaag is de laatste dag dat je de Variable Font Course kunt bestellen voor 109 euro. Elke maand wordt de prijs met een tientje verhoogd en dat is dus morgen…

Tot over twee weken!

Jeroen.

Vond je deze editie leuk? Ja Nee

Jeroen Disch @halfvet

Digital design met een dikke toef typografie. Voor visual designers, grafisch ontwerpers en type lovers. Elke twee weken.

– Jeroen Disch, Design Director bij Bravoure

Klik hier om je uit te schrijven.

Als deze nieuwsbrief doorgestuurd is en je wilt je aanmelden, klik dan hier.

Created with Revue by Twitter.