30-logo-examples-with-typography-for-inspiration-and-ideas

logo with typography

Hello guys, Today’s we have collected top 30 Examples of logo with typography for Inspiration and Ideas, i hope these logo typography design will help you to font and color selections.

Scoop

Typography-in-Logo-Design

Scoop logo by Dalius Stuoka / dribbble


demo


Stat Castle Logo Design

Stat Castle Logo Design

Stat Castle Logo Design by Dalius Stuoka


demo


Fixt Logo Design

Fixt Logo Design

Fixt Logo Design by Dalius Stuoka


demo


FlyNet Logo Design

FlyNet Logo Design

FlyNet Logo Design by Dalius Stuoka


demo


The Self of Doctor

The Self of Doctor by Logopol17

The Self of Doctor by Logopol17


demo


WARNING

Typography-in-Logo-Design-6

warning logo


demo


Negative Reality Logo Design

Negative Reality Logo Design

Negative Reality Logo Design by Dalius Stuoka


demo


Blind Wordmark

Blind Wordmark logo

Blind Wordmark logo by Sumesh A K


demo


Smash Logo

Smash Logo logo

Smash Logo by Sumesh A K


demo


Disappear Logotype

Disappear Logotype logos

Disappear Logotype by Vlado Paunović


demo


Big Bang Logo Design

Big Bang Logo Design

Big Bang Logo Design

by Dalius Stuoka


demo


jankes beekeeping

jankes-beekeeping

jankes-beekeeping


demo


Influentsy Logo

Influentsy Logo

Influentsy Logo by WeRock Studio


demo


Tie Logo Typography

Tie Logo Typography

Tie Logo Typography

by Hisyam Fadhil


demo


vPlay Logo Design

vPlay Logo Design

vPlay Logo Design

by Dalius Stuoka


demo


Clever Wordmarks

Clever Wordmarks 2016

Clever Wordmarks by

minimalexa design


demo


Doctor Wordmark

Doctor Wordmark by Aditya | Logo Designer

Doctor Wordmark by Aditya | Logo Designer


demo


Milk Logo

Milk Logo by Sumesh A K

Milk Logo by Sumesh A K


demo


DROP

DROP  logo

DROP logo


demo


CHECK

CHECK logo

CHECK logo


demo


USB logo

USB logo

USB logo


demo


Pubquiz Logo Design

Pubquiz Logo Design by Paulius Kairevicius in Logo Design

Pubquiz Logo Design

by Paulius Kairevicius in Logo Design


demo


Plane Logo Design

Plane Logo Design by Paulius Kairevicius

Plane Logo Design by Paulius Kairevicius


demo


Umbrella | Wordmark

Umbrella | Wordmark by Jabir j3

Umbrella | Wordmark by Jabir j3


demo


OPENBOX

OPENBOX logo

OPENBOX logo


demo


Hatchet

Hatchet by Jordan Wilson

Hatchet by Jordan Wilson


demo


Vip1 Identity Project

Vip1 Identity Project by Leo

Vip1 Identity Project by Leo


demo


Attach Logo Design

Attach Logo Design by Paulius Kairevicius in Logo Design

Attach Logo Design

by Paulius Kairevicius in Logo Design


demo


Codeshift Logo Design

Codeshift Logo Design by Dalius Stuoka | logo designer

Codeshift Logo Design by Dalius Stuoka | logo designer


demo


Brigitte Logo Design

 Brigitte Logo Design by Dalius Stuoka | logo designer


Brigitte Logo Design

by Dalius Stuoka | logo designer


demo


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.