small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2m257AA">zellwk.com</a> | 
The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, myself included.
Recently, I discovered a simple method to pair typefaces effectively and I’d love to share them with you. (Hint: it’s a 9×9 grid).
There’s one prerequisite to use this 9×9 grid (which I will reveal shortly) – knowing how to categorize typefaces. So, let’s start there.
<h2>Categorizing typefaces</h2>
On a broad level, typefaces can be categorized into the six categories. They are:
<ol>
<li>Sans-serif</li>
<li>Serif</li>
<li>Slab-serifs (or Egyptians)</li>
<li>Monospace</li>
<li>Script (or Cursive)</li>
<li>Display (or Decorative)</li>
</ol>
You can split typefaces into the first three categories by looking at the style of the serif.
If the typeface contains no serifs, they fall into the sans-serif category. (sans means without). Examples of sans-serif typefaces include Helvetica and Gill sans.
<img src="http://ift.tt/2llInyl" alt="Image of Helvetica typeface that contains no serifs"> Helvetica doesn’t contain any serifs. 
If the typeface contains serifs that look blocky, they fall under the slab-serif category. (slab means a large thick block). Slab-serifs are also called Egyptians even though there’s no relationship between the serifs and Egyptian writing. Examples of slab-serifs include Archer and Museo Slab.
<img src="http://ift.tt/2lBCZ5t" alt="Image of Museo Slab typeface that contains blocky serifs"> Museo Slab has blocky serifs. 
Any other typeface that contains serifs fall under the serifs category. Examples include Garamond and Georgia.
<img src="http://ift.tt/2llHpSt" alt="Image of Garamond typeface that contains serifs"> Garamond has serifs, but they’re not blocky. 
Monospace typefaces are no strangers to us developers. They’re typefaces whose characters occupy the same amount of horizontal space. They’re often used in tabular data and code. Examples include Menlo and Monaco.
<img src="http://ift.tt/2lBtcw0" alt="Image of Menlo that shows each character taking up the same amount of space"> Each letter in Menlo takes up the same amount of space. 
Script (or cursive) typefaces are often calligraphic in nature. They’re often used for short headlines, invitations and expressive text. Examples include Dancing Script and Lobster.
<img src="http://ift.tt/2llyu3w" alt="Image of Dancing Script"> Dancing Script is a script typeface. 
Finally, display typefaces are typefaces that are only used for large headlines. Many display typefaces are serif and sans-serif versions that are specially tweaked to look good at large sizes. Display typefaces also include ornamentals and decoratives, which can come in all sorts of form and styles. Examples include Freight Display and Abril Fatface.
<img src="http://ift.tt/2lBDxZ7" alt="display.png"> Freight Display is a display typeface. 
Now you know how to classify typefaces into six major categories, which is great! Unfortunately, these major categories are too broad.
To pair typefaces effectively, we often have to drill in deeper into the subcategories. We’re only going to look at sans-serifs, serifs and slab-serifs as we drill deeper since most typeface choices are made there.
<h2>Subcategorizing sans-serifs, serifs and slab-serifs</h2>
Things begin to get confusing when you begin to subcategorize. There’s a lot of subcategories, including but not limited to humanist, neo-humanist, old style, grotesque, neo-grotesque, transitional, geometric and modern.
Remembering the names of these subcategories, differentiating between them and correctly placing typefaces in them are three major challenges people face, myself included. After much research, I noticed you can group these subcategories into a simple 9×9 grid.
<img src="http://ift.tt/2llG1zn" alt="Empty 9×9 table with serif, sans-serif and slab-serif headers">
To fill up the 9&amp;times9; grid, we can look at three properties of the typeface. They are:
<ol>
<li>The letterforms</li>
<li>The stroke</li>
<li>The tilt</li>
</ol>
For the first two properties, it’s often enough to look at letters e and o. The third one is a layman term I came up with ?.
Let’s look at each of them.
<h3>The letterforms</h3>
Pay careful attention to the shape of the letters, especially of the letters e and o. Do they look like circles or squares? If they do, we can immediately classify the typeface as a geometric typeface.
Geometric typefaces contain letterforms that are based off shapes. They look constructed as opposed to handwritten. Because of they seem constructed, they also give off a modern, cool and impersonal vibe.
The geometric subcategory is only applicable to sans-serif and slab-serif typefaces. So, we can fill up the 9×9 grid as follows:
<img src="http://ift.tt/2lBwQ9i" alt="bottom and bottom left slots of the table contians the word: Geometric">
Next, we look at the stroke.
<h3>The contrast in strokes</h3>
The stroke of a typeface is lines that make it up. Pay attention to these lines. Do they vary in size between different parts of the letters?
<img src="http://ift.tt/2llIt8Y" alt="Image that explains what stroke is">
When we look at the stroke of a typeface, we’re only interested to use it to categorize serifs. This is because it’s rare for sans-serif and slab-serifs to exhibit any difference in the stroke.
If there’s little stroke contrast (little difference between thinnest and thickest part), we can categorize the typeface as an old-style serif.
Old-style serifs are serifs that the oldest readable typefaces (according to our current standards. Blackletter comes before it, which is hardly readable now). They mimic handwriting and are thus calligraphic in nature, which causes their letters to tilt more (more on tilt later). Since they mimic handwriting, they’re often seen as real, empathetic and traditional. They are also known as humanist serifs.
On the other hand, if there’s huge stroke contrast, we can categorize the typeface as a Modern serif.
Modern serifs are deliberately constructed to stand out. Their letterforms often stand upright with zero tilt, which makes them cool and impersonal, like Geometric typefaces. They are also known as rational serifs and didones.
Finally, what lies between modern serifs and old-style serifs are transitional serifs. Their stroke contrast is distinguishably larger than old-style serifs, but not as much as modern ones.
<img src="http://ift.tt/2lBheTg" alt="Increasing order of contrast in stroke from the left. Garamond, Baskerville and Didot"> See the difference in strokes in these three typefaces? 
After going through the stroke, our 9×9 grid becomes:
<img src="http://ift.tt/2llzpBa" alt="Filled up serifs column with old-style, transitional and modern categories">
Lets move on to the tilt.
<h3>The tilt</h3>
If you draw a line through the thinnest points of the stroke, you’ll see the stress of the letters.
<img src="http://ift.tt/2lBCoRd" alt="Image showing what the stress is"> Stress is found by drawing a line through the thinnest parts of the stroke 
If you paid attention so far, you’ll notice that stress can only be used to distinguish serif subcategories because you need to draw a line through the thinnest parts of the letterforms.
Although it may seem pointless to look at stress since we already have sorted serifs into their respective categories, I found it helpful to distinguish between sans-serif humanist and grotesque typefaces.
Let me explain.
Letterforms with a diagonal stress (like old-style serifs) looks like they’re tilted at an angle. Since they’re tilted, they mimic letters that are created by hand. (We don’t hold the pen perfectly upright, do we?).
Although the letters o and e can’t tell us if there’s any stress, we can look at other letters, especially those with shoulders, like h, m and n. If any of these shoulders looks as if they’re tilted (or if there’s any stress), we can categorize the typeface as a humanist typeface.
An example of a humanist sans-serif typeface that exhibits this behavior is Lucida Sans.
<img src="http://ift.tt/2llAVmU" alt="Image showing what tilt of Lucida Sans vs tilt of Acumin Pro"> Shoulders of Lucida Sans seem to tilt more 
On the other hand, if the letters look like they’re upright, we can categorize them as grotesque typefaces. As you may imagine, grotesque typefaces fall between humanist and geometric typefaces.
Just to add to your typography vocabulary, grotesque typefaces are also called grotesk or gothic, depending on the language. So, if you see these names on a typeface, you’ll know immediately which category these fall under.
Want an example? How about Aktiv Grotesk? 🙂
<img src="http://ift.tt/2lBteE8" alt="Image of tilt in Aktiv Grotesk"> Shoulders of Aktiv Grotesk is almost vertical 
After looking at the tilt, we can finally complete the 9×9 grid:
<img src="http://ift.tt/2llJRZk" alt="9×9 table filled entirely">
And with that, we’re done with categorizing typefaces into their respective categories and subcategories.
Before we move onto the next section, I want to highlight that typeface classification is highly subjective. Everyone classifies typefaces differently so you just have to decide for yourself. Some typefaces can fall into multiple subcategories too. An example is Proxima Nova, which can fall into all three sans-serif subcategories at the same time.
<h2>Using the 9×9 grid</h2>
If you searched around for typeface pairing rules, you’d often come across the following two rules, amongst others:
<ol>
<li>Pair sans-serif typefaces with serif (or slab-serif) typefaces</li>
<li>Pair typefaces from the same era</li>
</ol>
If you follow the first rule, you automatically create contrast with your two typefaces, which is a good thing. I explain why contrast is so important in my typography course, <a href="http://ift.tt/2m88vM7">Mastering Responsive Typography</a>.
The reason why experts recommend you to pair typefaces from the same era (or even from the same designer) is because these typefaces contain similar letterforms. Similar letterforms create a sense of familiarity through repetition, which is why different typefaces can blend well with each other. (<a href="http://ift.tt/2llyiBj">Read this article</a> an explanation of why repetiton creates familiarity)
Coincidentally (maybe not!), our 9×9 grid helps you identify typefaces created in the same era without remembering the subcategories. It’s used this way:
<img src="http://ift.tt/2lBDcp0" alt="Image showing how to pair typefaces using categories">
(This is mind blowing, isn’t it? ?)
Go ahead and try this out 🙂
<h2>Wrapping up</h2>
Today, you learned how to categorizes into six major subcategories and their respective subcategories. You also learned a technique to pairing (the 9×9 grid).
Now go play around with the technique and let me know your thoughts in the comments!
(This article as a sample of my responsive typography course, <a href="http://ift.tt/2m88vM7">Mastering Responsive Typography</a>)

How to choose and pair typefaces | Zell Liew

How to choose and pair typefaces | Zell Liew

Top Stories