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/2myqEU5">Giant Robots Smashing Into Other Giant Robots</a> | Joshua Ogle 
Typography has a very long history, 
from ink and brush through the printing press, 
but type on the web starts with the advent of digital type. 
A “typeface” is a group of all the letters 
of a specific family, style, and weight, 
like “Helvetica Bold Italic”. 
A “font” is a file that contains the typeface. 
When we’re talking about digital usage, 
these terms are fairly interchangeable, 
so don’t feel bad 
about getting them mixed up. 
We’ll mostly be talking about Latin typefaces 
(for languages with letters like English), 
but there is a whole wide world 
of categories and details 
for other languages 
that I encourage you to explore.
Early fonts were simple bitmap images 
of each character very quickly 
became the vectorized shapes 
that we know and use today. 
These scale better, obviously, 
but the vector format also allows 
for better control over 
what are essentially just elaborate shapes. 
In some ways, 
the details of those shapes matter 
so much more in typography 
than in iconography or illustration 
because they form the personality and voice 
of the content.
Even though the computer revolutionized the way 
we create and use typefaces, 
you’d be surprised how little has changed 
in the styles and categories of type. 
The anatomy of the characters, 
the names we give typefaces, 
and the terminology around how they work 
almost all go back hundreds of years or more. 
There’s a lot of terminology to learn 
if you’re going to impress your designer friends, 
so let’s get down to it.
<h3>
 <a href="http://ift.tt/2mZYkr4"> 
 Parts of a Typeface 
 </a> 
</h3>
<img src="http://ift.tt/2mfOuTw" alt="">
<ul>
<li>X-height: The height of lowercase letters like x, a, e, and o, not including ascenders and descenders.</li>
<li>Cap Height: The height of capital letters from a baseline to the top of character.</li>
<li>Baseline: The invisible line that guides the characters and forms the bottom of the x-height.</li>
<li>Ascender: Part of a character that raises above the x-height. Typically seen in b, d, f, h, k, l, t.</li>
<li>Descender: Part of the character that drops below the x-height. Typically seen in g, j, p, q, y, and sometimes J.</li>
<li>Serif: The projections off of the ends of a stroke in serif typefaces.</li>
<li>Arm/leg: An upward or downward stroke connected on one end.</li>
<li>Bar: The horizontal stroke in characters like A, H, and e.</li>
<li>Bowl: A curved stroke that encloses a space inside the character. This empty space is called a counter.</li>
<li>Ear: A small stroke that extends from the top of the lowercase g and sometimes r.</li>
<li>Loop: The lower portion of a lowercase g and some cursive letters with descenders.</li>
<li>Stem: A vertical stroke that typically forms the main structure of a character.</li>
<li>Shoulder: The curved stroke moving downward in letters like h, and n.</li>
<li>Tail: The diagonal descending stroke of a Q, K and R, or on lowercase letters like g and y.</li>
<li>Terminal: The end of a stroke that does not have a serif.</li>
</ul>
<h3>
 <a href="http://ift.tt/2mQDuh4"> 
 Types of Type 
 </a> 
</h3>
<h4>
 <a href="http://ift.tt/2mZUC0u"> 
 Serifs 
 </a> 
</h4>
Serif typefaces have a very long history, 
starting in ancient Rome 
where they were commonly carved 
or written with pen and ink. 
Serifs are the flat ends 
that are added to the ends 
of certain strokes, 
which aids in legibility 
and also serves to tidy the rough stroke ends 
when using these primitive writing techniques. 
These features were used in various kinds of writing systems 
for thousands of years, 
and they aren’t going away any time soon.
<img src="http://ift.tt/2mcPRRc" alt="Popular Serif Fonts">
Types of serifs:
<ul>
<li>Old-style: Patterned after the origin types of ancient Rome, these classic types feature brackets and some small variation in stroke weight.</li>
<li>Slab serif: Developed as a more modern type, these feature no bracketing, little change in stroke weight, and otherwise resemble geometric sans-serif types.</li>
<li>Transitional: A mixture of old-style and neoclassical designs, these types tend to be more geometric and regular but still feature bracket serifs.</li>
</ul>
Because of their classical roots, 
serif typefaces are associated 
with tradition and stability, 
so serifs in branding are particularly popular 
in the finance, education, and publishing industries. 
Serif typefaces haven’t received 
as much appreciation as those without serifs, 
but they have too rich a history 
and too many strengths to ignore.
They give a visual anchor to the characters 
that make them feel sturdy and solid. 
Serifs can also seem cold and imposing, 
but leveraging their good qualities 
can give a professional and trustworthy impression. 
They also improve legibility of long strings of text, 
giving the eye some stability 
as the serifs differentiate similar characters. 
So if you are designing 
for news articles, books or something dominated by lots of text, 
buck the trend and pick a nice serif.
<h4>
 <a href="http://ift.tt/2mQM0ML"> 
 Sans-serifs 
 </a> 
</h4>
Sans-serif types are a much more recent development 
relative to the long history of type. 
They became popular around the start of the 1800s 
and coincided with the start of modernism. 
Like we discussed with <a href="http://ift.tt/2li8lxR">abstraction</a>, 
design was moving toward a universal style 
and focusing on human-centered thinking. 
Sans-serif typefaces strip down the traditional letterforms 
to their essential parts, 
and are usually classified according 
to how far they take that goal.
<img src="http://ift.tt/2mcOn9K" alt="Popular Sans-Serif Fonts">
Sans-serif fonts come in a few different classifications:
<ul>
<li>Grotesque: These were some of the first sans-serifs and carry over some serif heritage, including bowls on the “g” shapes and some variation in stroke weight.</li>
<li>Geometric: Simple shapes and consistent stroke weights make this the most minimal of types, but also one of the least legible.</li>
<li>Humanist: These types take the best from both serif and sans-serif characteristics, and are geared for maximum legibility.</li>
</ul>
Popular sans-serif typefaces 
like Helvetica, Proxima Nova, and Open Sans 
are everywhere on the web these days 
because they fit right in with the modern aesthetic. 
That makes them a great choice 
for branding, marketing and user interfaces, 
but because they’re so ubiquitous 
they may not have the kind of impact you want. 
The typeface that you choose 
can have a big impact on your web project, 
so take the time to make sure the typeface you have in mind 
has a personality that matches your project’s personality. 
If you can’t decide between a serif 
and sans-serif typeface, 
don’t worry, 
we’ll cover <a href="http://ift.tt/2n06sHX">combining typefaces</a> in a bit.
<h4>
 <a href="http://ift.tt/2mQPpeu"> 
 Display 
 </a> 
</h4>
Display typefaces are meant to grab attention. 
Some look like various forms of handwriting, 
others are more graphical, 
and some push the limits of what a typeface can be. 
The typefaces vary wildly, 
so categories of display typefaces 
are more about style 
than specific anatomical parts.
<img src="http://ift.tt/2mfClOC" alt="Display Typefaces">
<ul>
<li>Calligraphic &#8211; As the name suggests, these are based on handwriting and calligraphy, with large loops alongside shapes that look much like italicised serif characters.</li>
<li>Formal Script &#8211; Less regular but also sometimes more formal than Calligraphic typefaces, Formal Scripts are modeled after classic cursive handwriting.</li>
<li>Casual Script &#8211; Even more varied, these look more like the scrawled handwriting that most of us use every day, but also covers the kind of hand-painted letters you might see on shop window signage.</li>
<li>Blackletter &#8211; A style of calligraphy popularized in Germany and was widespread in Middle Ages Europe. Extremely traditional and heavy, usually featuring ligatures.</li>
<li>Decorative &#8211; Any typeface that doesn’t fit in one of the categories we’ve described already but are recognizable as letters. It’s the junk drawer of typeface classification reserved for the especially wacky.</li>
</ul>
While many of them have classical roots 
in calligraphy and formal handwriting, 
these days display typefaces are mostly used sparingly 
for visual impact, 
taking advantage of their interesting visual characteristics. 
You will find display fonts used in brands and marketing, 
but they’re not likely to show up 
in a user interface elements or long-form articles. 
Sometimes you need the big guns, 
just be sure you use them responsibly.
<h4>
 <a href="http://ift.tt/2n078Nu"> 
 A quick note about other languages 
 </a> 
</h4>
Serif and sans-serif types appear in other writing systems too, 
not just the Latin alphabet, 
and are classified with many of the same terms. 
Try out your favorite serif font 
with support for Greek and Cyrillic characters 
and you probably won’t be too surprised to see 
that the characters look very similar 
to their Latin counterparts. 
Chinese and Japanese typefaces <a href="http://ift.tt/2md0pjh">can have the same features</a> 
with the same features even though 
they have a very different history. 
The digital age has influenced the styles 
of these different writing systems 
and the more they are used 
in combination with western type, 
the more obvious the influence becomes.
<img src="http://ift.tt/2mfHRAw" alt="Hangul, Kanji, Hindi, and Arabic - in traditional and modern typefaces">
<h3>
 <a href="http://ift.tt/2n06sHX"> 
 Pairing Typefaces 
 </a> 
</h3>
Now that we know the strengths and weaknesses 
of these kinds of typefaces, 
we can use each to its advantages. 
There’s absolutely no reason to stick 
to just serifs or just sans-serifs, 
so use whatever combination fits your brand the best.
Combining typefaces isn’t easy, 
and deserves some careful consideration of their parts 
to create a theme, 
and gives your project 
a much more unique look 
than you can get from one typeface alone. 
One of the typefaces you choose 
should be chosen as the foundation. 
I recommend starting with your body text, 
since this will probably be the simplest typeface to choose 
and arguably is the most important. 
Use the characteristics like a large or small x-height, 
the angle of the stems, 
and roundness of the bowls 
to build your other other typefaces around.
If you want some variety, 
but the idea of picking out specific typefaces 
gives you a panic attack, 
you can ease into things 
by sticking to one typeface family. 
Some typefaces will include a few variations 
that are all related 
(like “Tungsten”, “Tungsten Narrow”, and “Tungsten Rounded”). 
They were designed by the same type foundry 
to work well together, 
and give you just enough variation 
without worrying about the details.
<img src="http://ift.tt/2md0qUn" alt="">
The most common typeface pairing on the web 
is to match a serif for headings 
and a sans-serif for body text. 
It’s hard to go wrong with this combination, 
especially if you find a set 
from a foundry designed to work together. 
I like to make sure there’s a mixture 
of similar and disparate elements 
between them to provide a good balance.
<img src="http://ift.tt/2mfO13S" alt="">
Still too boring? 
See how far you can push things 
by bringing in some display typefaces 
or combining 3 or more fonts. 
Just keep in mind 
that your different font treatments 
should communicate to the user 
what the purpose of that text is, 
so if you have headings in more than one typeface 
or your UI elements don’t look similar, 
it will be confusing.
<img src="http://ift.tt/2mcMHNo" alt="">
<h3>
 <a href="http://ift.tt/2mQJbeL"> 
 Symbol and Icon Fonts 
 </a> 
</h3>
There’s one more category of font 
that almost doesn’t count as a typeface, 
but is very useful on the web. 
Symbol and Icon fonts are packaged 
just like other fonts, 
but they aren’t used for the same purpose at all. 
Symbols have always been used in combination with writing, 
so it makes sense to have fonts 
for this purpose (remember Wingdings?). 
On the web they have been adapted to provide icons 
for user interface elements 
where creating individual image assets would be a hassle. 
This also gives them the advantage 
of being easy to style in CSS just like fonts, 
and icon sets can come prepackaged as font files 
to make it easy to keep your symbols consistent.
<img src="http://ift.tt/2mfXHeJ" alt="Font Awesome symbols">
The example below is simply single characters of the font, 
just like you might type out a sentence, 
but what you get back is a collection of symbols instead. 
As you can imagine, 
this would be a terrible way 
to use an icon font (“What was ‘q’ again?”), 
so they usually come with a CSS stylesheet 
as well so you can just add a class to an element 
and the stylesheet will take care of adding the icon for you. 
All you would have to do is something like this:
<pre><code>&lt;i class="fa fa-question-circle-o"&gt;&lt;/i&gt; 
</code></pre>
This is an example from <a href="http://ift.tt/1hVZyjo">Font Awesome</a>, 
which cleverly uses the <code>&lt;i&gt;</code> tag 
not to mean <code>italics</code> (as originally intended), 
but to imply <code>icon</code>. 
Because icon fonts are so easy to implement this way, 
icon fonts have become very popular among developers 
and people who don’t want the mess 
of styling image icons. 
If you have an app project that will make heavy use of symbols, 
icon fonts can be a great choice. 
There are <a href="http://ift.tt/1hVZyjo">more</a> 
than <a href="http://ift.tt/2mfO5jP">a few</a> great Icon Fonts 
<a href="https://flaticons.co">to choose from</a>.
As we’ll discuss in the next section, 
Icon Fonts can create a performance problem 
by being yet another asset to fetch from your server, 
so you’ll have to weight the pros and cons 
for your particular project whether it’s worth it 
to use a font or something fancier 
like [inline SVG icons] instead.
<h3>
 <a href="http://ift.tt/2n0gfhi"> 
 Font Performance 
 </a> 
</h3>
The ability to easily <a href="http://ift.tt/1mMjiEh">use web fonts with CSS</a> 
has improved dramatically over the last few years, 
but because these depend on loading files 
into the browser after the page loads 
there are some performance issues to consider. 
Maybe more importantly for the design, 
it can lead to a momentary delay 
where your preferred font isn’t loaded 
and the dreaded “<a href="http://ift.tt/2mfRrDx">Flash of Unstyled Text</a>” 
creates a jarring effect for your user.
There are a few ways to combat this: 
&#8211; Use a hosted service like <a href="http://google.com/fonts">Google Fonts</a> or <a href="http://typekit.com">Typekit</a> for your typefaces. 
&#8211; Make sure you’re doing everything you can to optimize and cache your locally hosted fonts. 
&#8211; Make sure your fonts get loaded before other blocking scripts that could be loaded later. 
&#8211; Use <a href="http://ift.tt/2mfRrDx">some fancy JavaScript</a> to hide the text until the font is loaded.
I suggest using a service 
like <a href="http://google.com/fonts">Google Fonts</a> or <a href="http://typekit.com">Typekit</a> 
for your typefaces 
(especially if they happen to be freely hosted by Google). 
This means not having to host it yourself 
and they have easy integration instructions. 
The biggest benefit though 
is that there’s a decent chance your user 
has already come across this asset 
on another website and 
will have it cached in their browser. 
Not having to make another request 
for the font file will speed up the page load, 
and the font will load almost instantly if it’s in cache.

Typography

Typography

Top Stories