here’s-the-typography-of-the-next-decade

A few months ago, I found myself oddly transfixed by an advertisement on the train for a mattress company called Allswell. At first, I couldn’t tell what made the ads stand out from the dozens plastered across the trains and platforms at any given time. After several train rides spent staring up at the unnaturally bright smiles of models happily perched on mattresses, I realized: it wasn’t the ads themselves that stood out to me, but rather, their typography.

The Allswell logo uses Caslon Graphique, a striking, elegant font that lends an air of luxury and sophistication to a relatively young brand. Caslon Graphique belongs to a category of fonts known as Didones. Didones are serif fonts, meaning that, unlike the font that you’re currently reading, the strokes of letters have little feet at the ends. A Didone is characterized by long, narrow serifs, as well as a strong contrast between thick and thin strokes (see the difference in the curve and the crossbar of the ‘e’ in Allswell). Together, these elements give a Didone font a certain, unmistakably refined quality that is often absent from sans serifs or even more traditional serifs such as Times New Roman.

Didones first came into fashion around the turn of the nineteenth century, when printers and type designers began experimenting with alterations to the more traditional serif fonts that had defined newsprint and advertisements throughout the 1700s. Firmin Didot of France and Giambattista Bodoni of Italy were the founding fathers of the style, which was then called “Modern.” “Didone,” coined long after their deaths, is a portmanteau of “Didot” and “Bodoni,” which are also the names of two long-enduring Didones still used today.

Over the past year or so, Didones have covertly crept to the foreground of visual branding design for new companies and startups. There’s Winc, the millennial-targeted wine club; Dame, the sex toy company; Everspring, Target’s ecofriendly line of cleaning products; Welly, which makes first aid products; the list goes on, all with sleek, Didone logos are at the center of their brands. It’s a trend, but it’s also much more than that: the sudden insurgence of Didones represents a rejection of the typography and aesthetics that have come to define the 2010s, and an attempt to carve out a new aesthetic space, just in time for the beginning of a new decade.

In order to comprehend the significance of the budding Didone empire, one must understand what has happened to typography in the past ten years or so. At the beginning of the 2010s, geometric sans serifs — those without serifs or contrast in stroke width, and whose letters are built around simple shapes like circles and squares — experienced a dramatic uptick in popularity within web and digital design. As the geometric sans serifs rose to prominence, elements such as drop shadows, gradients, background textures, and bevels began to fall away, leaving behind the flat, minimalist digital aesthetic you might see on Facebook, Airbnb, or Postmates. Many designers cited a desire for increased legibility on low-resolution screens as reason for the shift; the desire for increased page-load speeds likely also played a role.

By 2015, when Google and Facebook pivoted to geometric sans serif logos within a few months of each other, geometric sans serif typography and minimalist aesthetics had reached a saturation point, both online and off. Among Peak Minimalism’s alleged merits were its implication of transparency: the spareness of brands stripped of clutter and ornament felt trustworthy, as if excesses in style were a middleman between consumer and company that had been stripped away. In the later half of the 2010s, however, oversaturation led geometric sans serifs to grow somewhat stale. The same attributes that once signalled approachability and friendliness began to read as sterile and impersonal as they grew more and more ubiquitous, particularly among large corporations and tech companies.

Didones represent a complete about-face from the design ethos of Peak Minimalism. On a technical level, Didones and geometric sans serifs are more or less total opposites: serif versus sans serif, intense stroke contrast versus none at all, tall ascenders (letters like “h” and “t”) versus short ones. But there’s also a more extensive rejection of the 2010s aesthetic at play. Against the no-frills, cheerfully pared-down look of Google et al, the use of Didones in the context of marketing feels downright luxurious, whether that sense of luxury is applied to a mattress or a vibrator or even a first aid kit. It’s worth noting that in addition to the clear generational dynamics at play — the majority of these brands appear to be marketing towards young people primarily — the new Didones seem to appear most often alongside brands that market towards women, be it Dame, Modcloth (a women’s clothing retailer), Flesh (a shade-inclusive makeup brand), or Kirsten Gillibrand’s brief presidential bid.

Earlier this year, Eliza Brooks suggested in an article for Vox that the return of serifs more broadly represents a retreat into the past, specifically, to the groovy aesthetic of the 1970s. This influence is more obvious in typography such as that of Buffy, a comforter startup which uses Cooper Black for its logo and branding, or Chobani, which opted for a chunky new text in 2015. Perhaps the change isn’t so much a retreat to the aesthetic of a particular historical period, but rather, the inevitable swing of a pendulum of which one side has consistently been some form of minimalism, be it the Swiss modernism of the 1950s or the flat design of the 2010s.

The internet has changed the conditions of graphic design in ways that are less subject to passing whims than typography. The need for cohesion across print and digital platforms — for your company’s ads in the subway to look like its ads on Instagram — has led to a minimalist zeitgeist that isn’t going away any time soon. Within the broader minimalist framework, however, ornate flourishes such as that of the Didones sate their viewers’ need for a reprieve from the visual austerity of the past decade, and the political austerity for which it has served as the default style. Sitting on the train, I found myself captivated by an advertisement for mattresses I can’t afford, of all things, simply because its typography injected a moment of beauty into a day spent being bombarded by advertisements that, with rare exceptions, look more or less the same.

That Didones represent a break from design homogeneity right now doesn’t mean that we might not face a new, Didone-centered homogeneity in ten years or so. It’s too early to tell what the visual language of the 2020s will look like more broadly, whether it will resemble the 2010s but with different typography, or if the Didones will helm an entirely new style. In any event, it seems that our relationship to typography and design is at the precipice of a transformation, and I, for one, am excited to see what it brings.

Rachel Hawley is a freelance writer and graphic designer based in Chicago.

experimental-typography,-the-way-to-show-off-your-style

Typography is getting more and more varied these days, as new trends and styles are added regularly while the basic roman and italic types remain all the rage. The abundance of techniques has become so immense, that anyone can try their hand in ‘classic’ or experimental typography.

Alternative or experimental typography denies the font’s primary role and isn’t necessarily about the type designer’s work. Instead, it welcomes illustrators, motion designers, digital artists, and applied arts masters to show off themselves via a custom font or an alphabet — without sticking to the rules of type geometry if they don’t feel like that.

Such sets of letters (which is a more exact definition) can be used just like display typefaces: to build up a strong visual effect for the printed production, branding, logotypes, apparel, and stationery design. Even stand-alone letters are incredibly engaging!

Finally, experimental typography is a great way to enrich your creative portfolio. Depending on your specialization, you can design an animated font, SVG font — or discover 3D typography.

3D design and 3D fonts are a huge trend for 2020 — so if you are good at Cinema 4D, it’s something you should give a go to. By creating extraordinary shapes and textures, you can create stunning compositions and build up entire scenes. Alongside casual 3D modeling, there are also letters made of wood, metal, and even foodstuff, which can take you to the next level of artistry.

Such types and sets of letters can help an illustrator apply the maximum of creativity and artistic skills. All in all, there are many drawing techniques to go with typography. Low poly art, vector fonts — you can even end up creating your own visual language similar to Matahari.

Experimental typography is not only for artistic entertainment. In October a group of social activists from Russia presented Dobroshrift.

This is a Cyrillic typeface drawn by children with cerebral palsy, and every letter has behind it a story of a precise child coming through this disorder. The Font of Kindness is also available in the Latin alphabet

Kinetic Typography & Animated Fonts

Love to a fine cycle in the style of Markus Magnusson is something everyone bears inside. And passion for GIFs too. So a motion masterly combines with a type can both boost your portfolio and help you do something new in After Effects. Shall it be an animated font or a piece of kinetic typography (which is a great technique to capture attention) — you decide!

9 Ridiculously Good Examples of Kinetic Typography

by Pavel Paratov, Luis Miguel Torres

by Jeroen Krielaars, MARÍA JOSÉ TORRERO HEREDIA, Animography

10-tips-to-improve-your-typography-skills

Are you ready to improve your typography and take your game to the next level? Wonder how? Don’t worry, we got you covered! Today we are sharing 10 Tips to Improve Your Typography Skills —the craft of endowing human language with a durable visual form.

“When typography is on point, words become images.”

Shawn Lukas

If you have heard the term typography before but have no idea what it is all about in this article, we will cover that for you. In this article, we will provide you with all the necessary tools and insight you need to improve and perfect yourself at all small and obscure concepts of typography so you can create the best looking website designs. For the uninitiated when you hear typography, you probably think it has something to do with the very complicated specialization, but that’s actually isn’t the case. Actually, every designer uses typography in one way or another when they design creatives.

The term typography is the art of designing, selecting, and arranging type to make words readable. 

The arrangement of the words involves a good understanding of selecting typefaces, line lengths, point sizes, leading (line spacing), and tracking (letter-spacing) and kerning (adjusting the space between pairs of letters). Type design is a closely related technique, sometimes considered part of typography. Oddly enough, most typographers do not design typefaces, and a lot of them do not even consider themselves typographers. Typography is also sometimes used as a decorative device, unrelated to communication of information.

So in nutshell typography stands for:

  • Style or appearance of text.
  • The art of working with text.

Now when you know what exactly this term stands for let’s see how to use typography more effectively in your design projects. You just need to follow our 10 tips to improve your typography skills:

Table of content

There are plenty of tiny details that, when put together, make for great typography design. Some of them are obscure other overlooked, but they are all critical for creating the “bigger picture.”

Context and audience

Typography - Context and audience

When you start choosing fonts, an essential thing to keep in mind and ask yourself is, “What is the main goal here?” 

There are plenty of font choices that will fit a specific need. Each individual font brings its own unique mood to the layout. Whether you choose a friendly, funny, serious, or business-themed font, this solely relies on your end goals and targeted audience. Every single font used has a specific character that conveys a different message to the reader. 

Classic fonts are often used to convey a strong personality and are commonly used for the more mature audience, while the more modern fonts have cleaner and neutral look, usually the better choice for the younger audience. If you choose a font that looks too fun, it will look silly for a business website, and users will hesitate to trust the company. Same thing if a product is meant for youngsters, too formal fonts may seem dull.

Bold fonts are mainly used for making statements and have the power to immediately capture the attention of the reader, the same way yours was captured with ‘s quote at the beginning of this article.

Utilize white space properly

Typography - Use of white space. Credit: benbate.com
Use of white space. Credit: benbate.com

The “whitespace,” also known as “negative space” is the empty space between elements in a composition. 

There are two sub-elements that make the “whitespace”:

Micro & Macro Whitespace

The space between significant elements in a composition is “Macro Whitespace.” It helps in giving the words “room to breathe.” “Micro Whitespace” is the space between smaller elements: between list items, between a caption and an image, or between words and letters — the itty-bitty stuff.

Using your white space evenly makes the content much more easy-looking and “scannable,” significantly improving your work. The thing about “whitespace” is as using silence in a musical composition. Without proportionate use of silence, the music turns into noise. Similarly, without “whitespace,” your design is unstructured and difficult to consume.

Appropriate Font Size

Typography - Appropriate Font Size
Credit: Simon Foundation

Choosing the proper font size is just as important as choosing the right type of font. You don’t want to be too big, but you don’t want it to be too small eighter.

How to choose a size when there are so many to choose from? Again, everything depends on the end goal. If you want your design to be expressing loud and clear bold statements or emphasize a specific word or sentence, you would most of the time want a bigger size but try using it sparingly.

If you are going for a more tender and subtle message, better go with a small or normal-sized font.

Use EMs or REMs

Typography - Em and REM
Em and REM

EMs and REMs are both essential units in typography, but how to know which one should you choose over the other?

EM units are based on the relative font size of the “parent” element. REM units, on the other hand, are based on the relative font size of the HTML element and act as a sort of a multiplier.

Most of the time, REM is going to be the go-to unit for you, but sometimes EM can be just as good and even better if you want the font to change based on the parent element. 

Relative sizing is a big selling point to EMs because it helps control the sizing of elements as they relate to others. EMs function as essential building blocks to website elements thanks to the fact that EM values compound.

Set Up a Hierarchy 

Typography - Font Hierarchy
Font Hierarchy

Beginners in typography often underestimate the necessity of using a hierarchy, and that makes their designs look poorly and unprofessional.

But setting up a hierarchy isn’t only used to impress your clients with your fantastic work structure, it makes everything a little bit more easy for you. Typographic hierarchy guides not only the audience but also to better focus on the more important points and makes it easier to differentiate them from the more simple and supporting parts.

Probably the most essential things in the hierarchy are position and alignment. You don’t have a well-structured hierarchy without mastering these two. The right positioning of the headings and the subheadings should be your top priority because they are the most impactful on the structuring your hierarchy. 

After you have figured the positioning and alignment of your headings and subheading, try to make your type stand out. The way to do this is to center it or set it outside of the regular margins of a page. This can make that type stand out within the hierarchy of a page.

Learn to Kern

Typography - Font kerning
Font kerning

In its purest form, kerning is the art of adjusting the space between two individual letters. The goal here is to equalize the appearance of the white space between letters, so they appear better in front of the eyes of the readers. This can be tricky for the beginner because there is no mathematic form or algorithm to use, so you really have to develop an eye for it.

The only automatic tool in kerning you can use is tracking. Tracking is adjusting the spacing uniformly over a given selection of a text and is just a thing to help you do the same thing you have already done but faster.

Learning this skill is not the most difficult thing in the world, but mastering it will automatically make you ahead of your competition because you would be able to make your own unique type.

Pairing Fonts 

Typography - Font Pairing
Font Pairing – Credit: Font Pair

Pairing fonts that compliment each other is an essential part of great results in typography designing. This is another thing that requires you to think outside of the box, but there is still a soft set of rules that you may want to follow.

Don’t be afraid to use unknown typefaces to you. Finding fonts that have style variants is a smart way to create nuance without unnecessarily overcomplicating your designs.

For example, a soft black Arima Madurai font combined with a light-colored background will make for a great pairing.

Experiment with a couple of your favorite fonts and also take inspiration from ads you saw before that made an impression on you and try to analyze what makes them work and use it.

Contrast is King

Typography - Typography - Contrast is King

The opposites attract each other; this is also the case in typography. If you want to add a creative tinge to your text and want it to stand out, then contrast is one of the best and easiest tools in your design arsenal you can use. 

Contrast is the second name for attention-grabbing. It effectively communicates the ideas you want to emphasize the most. Just as you need to know which font pairs well with others, you need to be aware and knowledgeable in using contrast to your advantage. 

Another example of great use of contrast like the one above is bold and rounded white typeface combined with a contrasting in style darker red one on a black background.

This way, the contrast in both style and color captures the reader’s attention exactly where you want it to be. To choose the perfect color contrast, you can always go for the traditional monochrome, or if you have been using it for too long and want something different, go for a full-color design. To ensure the color contrast doesn’t affect negatively on the readability, match the color of your font with the background as it creates a cohesive look.

Ensure Better Readability 

Of course, readability is important; after all, what is the point of making a complicated design. If all your audience sees is hard to read sentences? This may resolve in turning your audience off, leaving them with the feeling you take something away from them rather than giving them a good time looking at your work.

How to ensure better readability? Well… you just keep it simple honestly. Use simple words and phrases, also try to find short words. When readers “scan” through the words, they often tend to stay rather than leave, if there are short and simple words. That’s because this will take them less time to read, and we all know that nobody wants to waste their time.

Line Limit

Another way to ensure better readability is to have a line limit for your text. There are two “standards” of optimal line length for your body text. The first and the more popular one is 50-60 characters per line (including spaces). This is good for making short descriptions.  The second one suggests that up to 75 characters is also acceptable and even preferable in a lot of instances where you need to give a little bit more info. 

But why do you need to follow either of them, and what’s the downsides of violating these ranges?

An easy answer to this question is—your lines may appear either too wide or too narrow. If a line of a text is too long, the reader’s eyes will have a hard time. When the line length is difficult to gauge it becomes a problem and can affect negatively on the reader’s ability to focus onto the correct line in a large portion of a text. And if a line is too short, this also tends to stress the readers, making them start reading on the next line before finishing the current one, constantly making the eye travel back, breaking the reader’s rhythm, and potentially skipping important words.

Final Thoughts

Congratulations for making it this far through the article, now you are a few steps ahead on your journey in mastering typography. 

We hope these 10 tips to improve your typography skills have been useful to you. Share your opinion about the topic in the comment section and stay tuned for more.  

web-typography-in-2020:-what-will-it-look-like?

Get ready to conquer the audience with your typography!

Milena Abrosimova

Voluminous and diverse, geometric and eclectic — these are only some of the characteristics, applicable to the typography trends 2020. Some movements are still the same as they were, others only gain their power to be transformed into another typographic phenomenon of the year.

Anticipating the upcoming typography tendencies, I’ve highlighted the most predictable ones to guide you on the way to a splendid design. Keep in mind that all the points are interconnected, which is a handy tip to use when you decide to follow a couple of trends at once.

In the context of brutalism, still taking the leading positions in web-design, outline fonts hold up the higher grounds in trends: you can see them a lot in headlines and navigation menus. By choosing outline fonts you never risk to be missing out, that’s their total advantage.

Transition and outline typography via Van Holtz Co

Minimalistic and to-the-point designs resort to outline fonts with monolithic shapes, geometry, and vast spacing. And that won’t fade away in the upcoming year either.

Technologies don’t go round in circles, they dramatically evolve and set almost no boundaries to your creative performance. So the websites use these opportunities to build the best and the most interactive platforms, which was barely possible not so long time ago. Kinetic typography, that’s how it can be also called, can take any form and kind of movement: bouncing chubby letters, floating thin cursive or disappearing by click characters. The more responding your actions on the website are, the more chances there are for you to revisit it.

Leon Sans Animated Presentation via leon-kim.com

Great as they are, variable fonts are obviously one of the best things that happened to the world of typography. Unfortunately, they’ve been granted a slow pace of employment in design, which is unfair, taking into account the potential they have. Nevertheless, more and more design apps get variable fonts support, boosting the demand for similar font options being included where possible.

Graphit Typeface by LIT Web Presentation

With the digital design market slowly but surely spreading this trend around, we’ll be running into variable fonts on the websites and applications of our day-to-day use.

It might be obvious or too broad to imply serifs in general as the trend but here’s what in the limelight. With proper spacing and thickness, strokes are perceived not as visual rubbish but typographic sprinkles! From all the richness of serifs, the following ones will be all the rage: serif fonts with the high stroke weight as well as serifs with thin or barely visible strokes.

First Aid box design by Welly

In general, serif font can be used as means of contrast, paired with suitable sans, for instance, or if you elect to knock off two points with one shot, you can create outline serif ’cause why not?

It’s. Just. Sexy. Suits the best those who can’t make up their minds about one color for the project. The gradient move is sometimes attached to bad taste, thanks to all the misuse. But in the right hands it flourishes: just stick to the right palette and color compatibility to benefit from the decision to use ’em shades!

Weekly #artmash by Procreate

The true typographic ecstasy is achieved when you also animate the gradient overlay to feast the eyes of your audience with colorful ambient. Mind that.

This category has reserved itself a place of honor in typographic trends for years ahead. There can never be identical hand-made letterings, so the project will be ten times more unique with calligraphy involved. Besides, hand-written typography enables some special connection between the author and the viewer, that’s the best part of a personal approach in design.

by Maggie Enterrios

And this goes not only to “cozy-looking and cute” websites or apps for, let’s say, ordering a wooden hand-made photo frame from some crafty studio. People are getting better at hand-written typography so not hard to be its concentration will grow even higher the next year.

When there’s just not enough of typographic tools to reach the higher level of aesthetics, the game is on for SVG fonts! All the characters can be anything you want, designed under the common theme.

Bouqet Flower & Watercolor by Bloomxxvi

There exist no limits in geometry or symmetry, shapes or colors — just a bunch of vector images, comprising your artistic alphabet. The botanical SVG fonts are always hot but who knows what else will be trendy in 2020? All you should know is “try to reach the unity trough diversity of constituents”.

computer-age-typography:-hybrid-legibility-explains-that-ubiquitous-check-font

It is one of the most familiar and widely used character sets in the world, but it also looks dated or retrofuturistic, like something originally designed for use in a vintage science fiction film. The numbers are indeed old and have in fact inspired lookalike fonts used in computing and futuristic settings, but the original characters were never meant to be  harbingers of space-age aesthetics. Their distinctive shapes were in fact grounded entirely in an everyday problem: cashing checks at banks.

In the early 1900s, checks were still being processed manually by bank workers, which took a lot of time and consequently cost a lot of money. As people wrote more and more checks, the banking industry became increasingly interested in a way to automate the process — in particular: a standardized solution that would function across institutions.

By the mid-1950s, the Stanford Research Institute and General Electric Computer Laboratory had come up with just such a system using MICR (magnetic ink character recognition) along with that now-familiar font that is still in use today. The resulting E-13B was rapidly adopted by American banks and then spread to countries around the world.

In this designation, the letters E and B refer to design iterations while the number refers to the underlying 0.013-inch grid. The key to this solution was a combination of machine and human readability — if a magnetic scanning device failed, a person would need to check the numbers manually. To the machines, however, what mattered wasn’t the shape of the numbers as such but rather the magnetic waveform sensed when the checks were scanned. Essentially, each character communicated the same information but in entirely different ways for its target audiences of machine and human readers. Unlike a barcode, where the same data has to be presented in two formats, all of this information was wrapped up into a single set of legible numbers.

As Digital Check dot com explains it, “since the magnetic reader is measuring signal strength in a straight line – not capturing pixels like an ordinary camera – it’s not important where the magnetic ink is; what matters is how much ink there is in a vertical line at any given point.” To a machine, the numbers “look” entirely different, per the image below.

MICR came with other advantages, too. Its printed numbers were durable and remained machine-readable even if scuffed up or stamped over. MICR-readable checks could be printed using existing technology. The E-13B font was a parallel success and would go on to become a standard in most English-speaking (as well as many other) countries.

A competing standard, the CMC-7, was developed around the same time in France and is used across parts of Europe and elsewhere. This font was also designed to be readable by both humans and machines, though it operates like a bar code with vertical slats and gaps.

Today, check-scanning machines use both MICR and OCR (optical character recognition) to add redundancy and further reduce errors. For the most part, this second layer of machine reading is sufficient, but every once in a while (reportedly less than 1% of the time) a human still needs to step in and double-check things, so to speak.

E-13B is also not limited to checks — it has since come to be used on coupons, credit cards, transportation tickets and more. The original character set contained only numbers and a few symbols, though, so any letter variants seen in films, advertisements or other media actually evolved from this original and much more mundane creation.

Take for instance the Wheaton Font shown above. Its developer, Raymond Larabi, explains that “when you see an alphabet done in MICR E13B style,” like this one, it’s an “interpretation” based on the original set of numerals. In this case, he crafted “a font with just enough MICR E-13B flavor for the nerdiness to flow through but not so much that it impairs headline readability.”

The geeks behind E-13B presumably never imaged that their humbly functional here-and-now font would become so beloved, a source of inspiration for both type designers and fictional futures.

typography-resources

Inspiration design resource. Design publications, graphic design inspiration, graphic design publications, photographic publications, cinema publications, art publications, culture and art publications, typography publications, font publications, font publications. Logo publications, emblem publications, logo design publications, visual identity publications, visual identity design publications, corporate identity publications, brand identity publications. Color information broadcasts, stock visual broadcasts, stock visual broadcasts, stock photo broadcasts, stock photo broadcasts, stock picture broadcasts, stock picture broadcasts, stock video broadcasts. Stock video broadcasts, designer publications, photographer publications, artist publications, image publications, illustration publications, illustrator publications, illustrator publications, music broadcasts. Radio broadcasts, photography publications, cinema broadcasts, designer publications, photographer publications, graphic designer publications, designer publications. Design sites, graphic design samples, graphic design sites, photo sites, cinema sites, art sites, culture and art sites, typography sites, font sites, font sites, logo sites, emblem sites. Logo design sites, visual identification sites, graphic design samples, visual identity design sites, corporate identity sites, brand identity sites, color information sites, stock visual sites, stock visual sites. Stock photo sites, stock photo sites, stock image sites, stock image sites, stock video sites, stock video sites, designer sites, photographer sites. Painter sites, image sites, illustration sites, illustrator sites, draws sites, music sites, radio sites, photography sites, cinema sites, designer sites, photographer sites, graphic designer sites, designer sites. Design archive, graphic design archive, photo archive, cinema archive, art archive, culture and art archive, typography archive, font archive, font archive, logo archive, emblem archive, archive design archive, visual identity archive. Visual identity design archive, corporate identity archive, brand identity archive, color information archive, stock visual archive, stock image archive. Stock Images Archive, stock images archive, stock images archive, stock images archive, stock video archive, stock video archive, designer archive, photographer archive, painter archive, image archive. Illustration archive, illustrator archive, illustrator archive, music archive, radio archive, photography archive, archive archive. Designer archive, photographer archive, graphic designer archive, designer archive.

the-typography-showcase-month

As more and more design studios make Brandpad part of their process, we’re lucky to see great new brands come to life every day. While we equally enjoy every single part of a brand identity, the font is one of those things that always seem to spark a great conversation.

Brandpad

As a result of this everlasting source of inspiration, we’ve decided to do our part in celebrating the craft of type design — and the foundries that bring us the goods. So, this September, we’re initiating what we call the ‘Typography showcase month’ at Brandpad.

The Brandpad identity is rather minimalistic and relies heavily on Graphik by Commercial Type. In September, however, we’ll set our type guidelines aside and use our website to showcase different typefaces. Starting today, www.brandpad.io will be shaken up with a new font every seven days until October 1st. We’re hoping this will help showcase the importance of type design and the effect it has on a visual identity. Also, simply put, it’s just plain fun.

Gangster Grotesk by Fresh Fonts/Pizza Typefaces

Gangster Grotesk (02–09 September)

To initiate this, we’re starting with one of our newly found likes from a new supplier; Fresh Fonts. It’s named Gangster Grotesk and is made by Adrien Midzic of Pizza Typefaces. It was released in April and is a contemporary typeface that combines a sharp contrast with angled terminal strokes that curve just a little bit inwards. It draws inspiration from the 1920s heydays of the American gangsters and is designed to do wonders both in print and on-screen. You can visit Freshfonts and Pizza Typefaces for more info.

Styrene (& images) by Commercial Type.

Styrene (09–16 September)

Probably familiar to many, Styrene is a sans serif by Berton Hasebe and Ilya Ruderman for Commercial Type. It’s described as an exploration of proportion and simplicity in type design. Styrene is characterized by its proportions: typically narrow characters like f, j, r and t are hyperextended and flattened, adding openness in unexpected places.

Reader by The Entente & Colophon. Images by Allinthename.

Reader (16–23 September)

Reader is a neo-grotesque typeface designed by The Entente for Colophon. Originally referenced from an RSPB letter dating 1972, then re-drawn and the proportions re-balanced, allowing it to shift into a neo-grotesque genre. It was released in 2009 and extended in 2018. Check out The Entente and Colophon for more information.

Favorit (23–30 September)

This showcase ends on September 30th and with Favorit, described as “a straightforward low-contrast grotesque” that combines a rigid drawing with subtle oddities and a humorous touch. It was designed by Johannes Breyer & Fabian Harb and is released for Dinamo. Learn more about Dinamo here and check out the Favorit family.

We’ll keep updating this section with screengrabs of the different fonts and its effect on our brand. Meanwhile, if you want to see the specimens in action, you can visit www.brandpad.io.

Left: Graphik (our original typeface). Right: Gangster Grotesk.

Gangster Grotesk, paragraphs on brandpad.io

Learning about type doesn’t need to be daunting.

Dave Smyth

Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice-looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typograph

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Typewolf

I know, this was mentioned above…but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration — a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif serif, sans-serif serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts


There are lots of resources to get you started here, wherever you are on your typographical journey. Type on the web has many nuances and CSS developments mean there are always new things to learn.

If there are other resources you’ve found to be particularly useful, I’d love to hear about them in the responses.

typography-as-a-radical-act-in-an-industry-ever-dominated-by-white-men
Rubin typeface

Letterforms are loaded cultural objects—they often reflect the people who made them and the story they want to tell. In the history of type, not every story gets told, though, and Tré Seals wants to change that.

Seals started a type foundry called Vocal Type with the aim of creating typefaces that reflect a more diverse perspective. In his words: “This is a type foundry for creatives of color who feel they don’t have a say in their industry. This is for the creative women who feel they don’t have a say in their industry. This is for the creative who is tired of being ‘inspired’ by the same creations from different people and wondering why.”

Since 2016, the foundry has released five retail typefaces, worked on numerous custom type jobs, and launched a website that details the historically significant backstories of Vocal Type’s projects.  While this isn’t too remarkable, Vocal Type is unusual in that its founder is black.

Typography is notorious for its racial homogeneity. The two main pathways to designing fonts are from tech and design, which are industries dominated by white men. Vocal’s own site clocks the profession at 84% white, and AIGA’s 2017 Design Census at 60%. This has been a conversation in the field even before Dr. Cheryl D. Holmes-Miller called out the profession in her 1991 article for the AIGA Journal, “Why is Graphic Design 93% White?

Seals discovered Holmes-Miller in his first year after design school at Stevenson University while he was cutting his teeth freelancing in branding and illustration. He quickly found that type designers of color like him were almost non-existent—something designers such as Maurice Cherry and Miller had been noting for years. Inspired by Holmes-Miller’s 1987 call to action, “Black Designers: Missing in Action” and her 2016 sequel, “Black Designers: Still Missing in Action?,” Seals contacted her about his idea to start a type foundry that could represent diverse experiences in typographic form. “Hurry up and do it before someone else does!” she told him. And so he did.

Vocal’s typefaces take inspiration from typographic ephemera created for and by historical visionaries of color. These include the typeface Martin, named after Martin Luther King, and William, named after W.E.B. Du Bois, an American activist, writer, and historian, and one of the founders of the National Association for the Advancement of Colored People (NAACP). The fonts also echo lesser-known protest movements like Ruben, inspired by the National Chicano Moratorium movement, which protested the Vietnam War and was led by journalist Rubén Salazar.

Seals didn’t want to limit his aims of diversifying typographic voices to solely ideas around race; and has also created typefaces like Carrie, a sans serif that honors women’s suffrage in the United States; Eva, created for the suffrage movement in Argentina, and Stonewall to recognize the LGBTQ 1969 riots at the Stonewall Inn in Greenwich Village, New York City.

“Hurry up and do it before someone else does!”

Each font is born from detailed research and is shaped by the collective efforts of Seals’ online communities. Often, Seals will share source material—photos, posters, bits of type—with his followers through Pinterest and Instagram, and they will, in turn, provide him with additional archival photographs of protest signs and scraps of ephemera that are enough to set a typeface in motion. For Martin, Seals was inspired by photos of typographic broadsides reading “HONOR KING: END RACISM!” and “I AM A MAN” printed in a church print shop in runs of 400 for the 1968 Memphis Sanitation Workers Strike, during which more than 1,300 black employees of the Memphis Department of Public Works protested dangerous working conditions.

For the ornate Eva typeface, Seals referenced hand-drawn banners carried during a 1947 Women’s Demonstration in Buenos Aires led by Eva Perón that were paraded in front of the National Congress by Law for Universal Suffrage stating, “LA MUJER PUEDE Y DEBE VOTAR” or “WOMEN CAN AND SHOULD VOTE.” With William, Seals draws on the hand rendered lettering used in the pioneering information graphics created by W.E.B. Du Bois and his students of color at Atlanta University for a display of African-American progress at the 1900 World’s Fair in Paris. Designed as typographic proclamations about the equality of all Americans, the predominant letter style used in the charts has no curves, only straight lines, and is more akin to the no-nonsense letterforms seen in architecture and engineering plans.

“I believe that all type and design is subliminal—no matter how monotonous or garish.”

Seals recently completed a suite of custom typefaces for Umber, an Oakland, California-based printed publication that focuses on creative culture and visual arts from the perspective of people of color. For its third issue themed “Sound,” Vocal crafted a typeface based on remnants from the first all-black-owned record label, Broome Special Phonograph Records, plus a family of six weights based on sound waves.

Broome typeface

Seals views typography as more than a utilitarian tool. For him, type is a main character in the story of visual language and identity deeply rooted in graphic design and branding. “I believe that all type and design is subliminal—no matter how monotonous or garish,” he says. “From a consumer perspective, I think it’s more about the look and feel than anything else, nor can they really explain it beyond that. I think type and design can look and feel ‘luxurious,’ ‘vintage,’ ‘bold,’ ‘new,’ or ‘insert culturally relevant term here.’”

The words of the 1960s painter Emma Amos still ring true in today’s design culture: “For me, a black woman artist, to walk into the studio is a political act.”

In the long history of type design, designers of color have historically had limited access to the tools and knowledge necessary to create typography. This form of technological discrimination has had the effect of limiting the groups of people reflected in—and represented by—the typography we see in the world.  In that sense, Vocal Type’s fonts and platform are a radical act—not just because they’re different, but because their excellence transcends their historical minority voice. The words of the 1960s painter Emma Amos still ring true today in today’s design culture: “For me, a black woman artist, to walk into the studio is a political act.”

“If consumers understood design half as much as they understand technology, they’d be able to make better conscious (and possibly world changing) decisions”

Seals is reticent to connect Vocal Type’s releases to the broader legacy of utopian-inspired design. But he’s also cautiously optimistic about the potential of treating typography as a starting point for deeper conversations about culture and representation. “If consumers understood design half as much as they understand technology, they’d be able to make better conscious (and possibly world changing) decisions,” he says.