typography Archives - WhatFontIs.com Playground https://www.whatfontis.com/blog/tag/typography/ Using What Font is you can identify the font you are looking for! Thu, 09 Jul 2020 06:07:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.1 10 Websites That Use Typography Right https://www.whatfontis.com/blog/websites-that-use-typography-right/ Thu, 09 Jul 2020 06:00:39 +0000 https://www.whatfontis.com/blog/?p=74081 Prepare yourself to get huge inspiration from 10 websites that use typography right. You will see how different websites (some have tens of billions of unique visitors each month) use typography to help users find content, get messages, and information on their websites.

The post 10 Websites That Use Typography Right appeared first on WhatFontIs.com Playground.

]]>
Prepare yourself to get huge inspiration from 10 websites that use typography right. You will see how different websites (some have tens of billions of unique visitors each month) use typography to help users find content, get messages, and information on their websites.

Take from each what they are doing great and if possible, implement it on your website. Using the right typography doesn’t cost money (even if you for the fonts, the prices are very small), it is only a game of design rules and creativity.

Here we start.

I happily present you 10 websites that use typography right

Smashing Magazine

Smashing Magazine is among the best 3 web publications for web and graphic designers, and for developers. And not since now, but almost from their very first start in 2006.

The writers that collaborate with this publication are experts in their fields, and the articles that they provide are always complete, with all the information you need. If you are not an expert, you cannot publish content here.

Of course, this publication is using typography right, everything is perfect on their website.

The content is easy to read, and the overall design is very pleasant.

For the headlines, they use Mija bold and for the paragraphs they use Elena.

Andre.work

Andre do Amara has a superb website where he combined extremely well the minimalist design with super bold, large headlines.

He uses Helvetica, a common font, but just take a look at his website design, it is awesome.

Wikipedia

Wikipedia is a super popular website that helps people from all over the world find information about pretty much everything.

How many unique visitors per month? “Only” 5.78 billion, not so much, right? 🙂

This website relies heavily on textual content, so typography play here even a bigger role.

The used fonts are very well balanced, always have the right size difference to understand the prioritization concept in design, and the colors help us understand where are links and where are not.

Wikipedia uses a Sans Serif font.

Google

Google is another great example of a textual content website.

When you search on Google, you get a results page that is almost based only on typography.

Each result has a good distance between each other, and the font is used in different colors and sizes to help us see better the results and the info about them.

Inspiration come usually from simple places; Google is a great example. Why “run” after who knows what inspiring examples when you can simply see what a website with over 81 billion unique visitors each month is doing right?

They use Arial.

Click Funnels

Click Funnels is the kind of website that adopted the long text marketing approach. But they did it right.

Some websites using this approach are writing tons of texts that are very hard to read and follow.

The designer used pretty small headlines with colors that already present in the design, and paragraphs that are easy to read. Simple design rules that make a website look great.

They use Source Sans Pro and Helvetica.

Sell Like Crazy – book website

Even as I am not a huge fan of the aggressive approach in advertising, this website is using typography extremely well to make you buy the book.

They use bold headlines with right letter and line distancing, the right font for easy to read paragraphs, and the right colors.

Sabri (the writer) uses Barlow for headlines and Sanso Sans for paragraphs.

Nurture Digital

In the left part of their homepage, they built a huge N (the first letter from their brand) and created a video inside. Clever idea that transforms their homepage in a super attractive design.

But wait, on each page they used a letter and inside a video. Way cooler than I initially thought.

They even explain how the blend mask was created.

Congrats guys, you rock!

The website is using Abril Fatface for the large headlines and Aktiv Grotesk for the paragraphs.

Hauska

Next stop, South Korea.

Hauska use typography at its best combined with a minimalist design.


The result? An impressive homepage with clear design prioritization – the headline is clear the message of the website.

They use Inter for the large headline.

USSR Design Almanac

This website is extremely interesting from 2 points of view.

First, the website is the design almanac of the Soviet Union. Here we can find some of the best works made in the USSR are collected: cars, photos, architecture, graphic design and much more.

The second is the typography. They don’t respect any rule, they use all kind of fonts, sizes, colors, line and letter distancing. In just a few words, they break all the rules. But it works for this website.

They use Aeonik for the paragraphs.

Passione

A homepage made only by using typography. How does it look? Awesome.

They wanted you to know that they deliver nationwide, this is the single message you should get from this page. Did it work? Be sure of that.

In the headline they use 2 fonts, Laica B and Nuckle.

How did I identify fonts in all these websites?

It is super simple to identify fonts from websites and even from pictures, you probably know it, right?

To identify fonts from websites, you have to install the Font Identifier by WhatFontIs. It is a Chrome Extension that you can get from here. It is free, super-efficient, and simple to use.

You click the icon in the upper right part of your browser and then you simply hover with the mouse the font you want identified. It will even help you with 60 alternative fonts with a click of a button.

Conclusions

Using typography right is not optional if you want high-converting and great-looking websites.

All these 10 websites are using it right and that is why all are having super successful, each in its field.

Get you inspiration from these websites that use typography right and use the font identifier by WhatFontIs to get the fonts for your projects.

The post 10 Websites That Use Typography Right appeared first on WhatFontIs.com Playground.

]]>
How to improve the typography design that you create https://www.whatfontis.com/blog/typography-design/ Thu, 03 Oct 2019 16:32:37 +0000 https://www.whatfontis.com/blog/?p=72389 The first metal and wooden printing presses from six centuries ago continue to inspire modern typography design despite the substantial technological and time gap.

The post How to improve the typography design that you create appeared first on WhatFontIs.com Playground.

]]>
The first metal and wooden printing presses from six centuries ago continue to inspire modern typography design despite the substantial technological and time gap. Typography remains an art that requires creativity, dedication, passion, and, most of all, a comprehensive set of skills.

Graphic design typography is not all about pretty fonts as you may tend to believe and, being an art, is not always practical. Here are some useful tips designed to enhance typographic choices when it comes to typical projects such as business cards, resumes, or newsletters.

Match Mood to Message

Many people tend to use the same font repeatedly, no matter the occasion, just because they love it. Others don’t see the difference between one font or another or don’t understand the importance of matching your font to the message you are trying to convey.

It may sound strange, but the fact is that fonts aren’t a suitable for all situations kind of thing. Each font has its distinct personality. Your font choice in typography design depends on what emotion that font arouses in you and how that specific emotion fits with the message of your design.

Before making a font choice, you need to analyze what message you want to communicate through your design. Once you’ve figured that out, you can search and find a font that sets the mood for conveying that message.

Match Mood to Audience

A font choice is not only about matching the mood to the message, but it is about carrying the desired message to a particular audience through the right typographical decisions. Each audience has its own expectations and will perceive your typographic design choices with those expectations in mind.

Typography designs in general and fonts, in particular, are perceived differently by different demographic groups depending on age, location, social and cultural background, etc. The point is that you need to be aware and understand that perception yourself before making any typography design choices.

When your audience is a wide range of people and not a specific, well-defined group, a good typography rule is to stick with a workhorse typeface that doesn’t stand out and just blends into the overall design. This type of neutral font doesn’t express a particular mood and doesn’t have a strong character.

Match Point Size to Design Context

There are several typography tips to consider when you want to learn how to do typography like a pro as far as font’s point size is concerned. A simple typography rule in that you need to adapt the point size of your font to your design context, i.e., the specific features of your design project.

  • Match font size to your readability goals, which means point size should be not too small to make reading challenging or impossible and not too large to make typeface annoying. 15-20 pixels for web typography designs and 10-12 points for print projects.
  • Adapt font size to the particularities of your font choice. When you learn typography, you find out that not all fonts are created equal, and with each having its own characteristics, you must select the optimal font size for a specific typeface.

Matching font size to the design context is taking into account how the project is displayed/presented as well as its physical size. The common-sense rule of simple typography tells you to use small-size fonts for business cards or lengthy passages and larger fonts for typography banner, for example.

No matter the typography design project you are handling, you need to remember that the role of font and point typography is to make the message easy to read and convey the message clearly. Some projects allow more creativity and freedom, while others don’t.

Typography Design: Points of Focus

There are several aspects to pay heed to when you are looking to develop the best typography design for your project. Playing with these elements will allow you to achieve a balanced, unique design:

  1. Typographic Measures

The right measure doesn’t necessarily improve your typography design by itself. Again, the role of typographic measures is to generate optimum readability within the specificity of your design. 40-80 character-long measures are said to achieve optimum readability.

  1. Font Leading

In typography, leading refers to the space between typography lines, i.e., the vertical spacing of text. Why is leading important? It is vital for proper copy readability, has a clean or untidy impact on the audience, and generates a specific density of the composition, i.e., typographic color.

Font leading is influenced by point size, typography measure, kerning, font choice, case, word spacing, etc. depending on your typeface choice, the ideal font leading should be set at 2 to 5 points larger than the actual font size because the longer the measure, the more leading is required.

  1. Hanging Quotes

The role of hanging quotes is to maintain optimum readability by maintaining an intact and balanced left alignment. Hanging quotes means leaving quotation marks hanging in the margin of the text, which prevents them from disrupting the flow of a body of text.

  1. Typography Widow and Orphan Typography

Both widows and orphans generate irregular or uneven vertical margin of a block of type, i.e., rags, which upset the reader’s reading rhythm. Adjusting type size, font type, measure, leading, kerning, word spacing, and manual line break design can help you control widows and orphans.

  • A widow in typography is a single word or a short line at the end of a paragraph
  • An orphan is a short line or word at the beginning of a column or page
  1. Rags

When going for left or right alignment, the uneven vertical margin, i.e., rag, needs to be balanced to avoid clumsy shapes and holes in the block of type.  A soft unevenness, or clean rags, will not unsettle the eye or distract the reader. In CSS, you can only do this by manual adjustment.

  1. Background Color

Typography design is many times about balance, and your background color needs to create sufficient contrast to make your text prominent enough. Avoid clashing colors, dramatically bright neon colors, frustratingly busy backgrounds. Transparency effects and warping can be used but purposefully, not for the sake of appearances.

  1. Word Emphasis

As a designer, you know that emphasis is important, but you should also know that too striking an emphasis can be disrupting. You can emphasize a word by using italic, bold, small caps, caps, changing font size or color, underlining, or using a different font.

Use just one form of emphasis and stay away from awkward combinations, such as italic, bold, or italic-bold-underline.  Italic is said to be the most efficient way of word emphasis in typography design that causes the least disturbance to the reader’s rhythm.

The Best Designing Deals and Trends

Typography design is an evolving art and, just like with all forms of art, there are trends that determine a certain style for a certain moment in time. A good designer is a good observer and pays attention to the latest trends.

You are not an island in the world of graphic design. Pay attention to the best design deals and embrace the trends that are leading typography design.

Ending thoughts on typography design

Typography design has many elements, and you need to pay attention to all of them and the way they come together in order to attain balance.

It is a matter of using your creativity and unique personal touch to play with those components. It’s not rocket science, but it’s not easy-peasy either.

Arrange letters in your own unique fashion by paying attention to letter spacing, font leading, content mood, word spacing, typeface, font size, line measure, hanging quotes, and more.

Attend to all those typography design aspects targeting harmony and balance in all facets of your typography design.

If you enjoyed reading this article about the typography design, you should read these as well:

The post How to improve the typography design that you create appeared first on WhatFontIs.com Playground.

]]>
How do famous brands choose their fonts? https://www.whatfontis.com/blog/how-do-famous-brands-choose-their-fonts/ Wed, 22 May 2019 06:51:10 +0000 https://www.whatfontis.com/blog/?p=73059 Can a font type for your logo speak more about your brand and about you than you think? Some of the most famous brands in the world may already be aware of it.

The post How do famous brands choose their fonts? appeared first on WhatFontIs.com Playground.

]]>
Can a font type for your logo speak more about your brand and about you than you think? It seems that one of the most famous brands in the world may already be aware of the power a font can have to the public.

In this article you will find out how fonts like serif, sans serif, script, modern, and display typefaces are being used by some brands and industries, and how there seems to be a psychology behind some fonts. It is believed that certain scripts can induce different emotions and create associations in the mind of the audience.

We know that people have certain feelings when they see different colours and shapes. So what we need to know is that people can actually react in the same way when they look at fonts. That’s soo cool! So beware when you choose the fonts for your designs and logos!

For instance

Now, let’s see what these famous brands are using as fonts for their logos:

Cadillac

Cadillac is an American luxury vehicle marquee founded in 1902. It is also one of the oldest automobile brands in the world. Cadillac uses the script English 157 to transmit the message of elegance and sophistication.

Disney

The Walt Disney Company, commonly nicknamed as Disney, is one of the largest entertainment and media companies in the world. It was founded in 1923 by Walt Disney and his brother, Roy Oliver Disney, as the Disney Brothers Cartoon Studio. Disney used the Display Waltograph font for their logo and managed to make their brand one of the most known and recognized logos in the world.

LinkedIn

The primary type family for LinkedIn is Source Sans. The company also openly shares the typography specifics of their brand and logo here. The use of Sans serif font makes the company look very clean and business-like. Its design can transmits professionalism and will make you feel like you can achieve your business objectives through them.

Google

The Google font is simple, but respectable. Google is associated with stability and reliability and its serif font has a calming influence. Google has been iterating on the font since 2011, because the brand is well aware of how much impact can a logo have.

So which font do you like most? If you are currently designing your logo and you are looking for a great font, you can visit Whatfontis.com. Remember you have a huge palette of choice. With 550.000 fonts on our site you need to choose wisely!

The post How do famous brands choose their fonts? appeared first on WhatFontIs.com Playground.

]]>
Sci-Fi Fonts https://www.whatfontis.com/blog/sci-fi-fonts/ Fri, 03 May 2019 09:00:49 +0000 https://www.whatfontis.com/blog/?p=72948 Are we alone in this Universe? Since we're not scientists, nor astronauts, we can at least show you some futuristic, sci-fi fonts that we know you'll like!

The post Sci-Fi Fonts appeared first on WhatFontIs.com Playground.

]]>
Imagination has no boundaries! Imagination and science drove us to explore the outer-space and ask ourselves the question: Are we alone in this Universe? We know for sure that sci-fi fans are keeping their fingers crossed now. Since we’re not scientists, nor astronauts, we can at least show you some futuristic, sci-fi fonts that we know you’ll like!

Alien League

First things first. Aliens! The Alien League font is a contemporary sans serif design and contains more humanist characteristics than many of its predecessors. It looks minimalistic and in sync with last decades of the twentieth century. This font will work perfectly for creating futuristic space age designs, posters and various branding projects.

Blade Runner Movie Font

Let’s move on to another futuristic, sci-fi movie inspired script, very similar to the official Blade Runner Movie Font, designed by Phil Steinschneider. We believe the white line throughout the fonts gives it a unique texture and makes it look very fancy. Remember that if you want to attract Replicants, you can use this font on a poster and they will reveal themselves to you.

Death Star Regular Font

In a distant galaxy far, far away the numerous fans of this epic series had very few options when trying to find a font for their projects. Patience they had and thank later they did! The font was designed by Sharkshock and it features all caps and a classic 80’s style. The geometric, rounded curves and limited strokes, as well as the width variation bring the retro feel that will fit perfectly into your logos, T-shirts or your Star Wars inspired blog.

Galaxy 1 font

Another fonts that look out of this space that we found is the Galaxy 1 font. With its sci-fi and funky design, it is the perfect choice for pretty much anything, if you want to catch some extra attention. The Galaxy 1 font makes us remember of Dave Bowman’s final words as he entered the monolith in the book 2001: A SpaceOdyssey. The design brings back a piece of the galaxy, along with many, many shining stars.

 Prometheus font

The Prometheus font makes us think of a cryptic signal received from a abandoned alien spacecraft. It is inspired by the prequel series Prometheus and its design looks very sci-fi, as if created by an advanced civilization. We know for sure that it’s not a weapon which could drive the human race extinct. Instead, it will make a lot of creative humans happy.

System Glitch otf

System Glitch otf font is a detailed style font designed to work at large type sizes in titles and headlines. It can be used to create glitchy sci-fi art, distorted VHS effect and simulate digital interference text effect. It would be right for a lot of logos, in the gaming industry and even on clothing items. Hope you like it as much as we do!

In conclusion, we hope you liked our selection of sci-fi fonts and that you will go binge on science-fiction movies. We know that many of you have secretly been wishing to be astronauts when little! If you want to check more sci-fi fonts, go on Whatfontis.com. With over 550,000 available fonts, you’ll definitely find what you are looking for.

The post Sci-Fi Fonts appeared first on WhatFontIs.com Playground.

]]>
Principle #6: ascenders and descenders https://www.whatfontis.com/blog/principle-6-ascenders-and-descenders/ Fri, 29 Mar 2019 13:00:59 +0000 https://www.whatfontis.com/blog/?p=72821 Imagination made us wonder: are humans and letters similar? If you really think about it, you might find lots of similarities. Some are tall and some are short. Some are round and some are slim. And, surprisingly, both humans and letters have ups and downs. People have good days and bad days, while letters have ascenders and descenders. Don't know what those two elements are? Take a sit and let us tell you their story!

The post Principle #6: ascenders and descenders appeared first on WhatFontIs.com Playground.

]]>
Imagination made us wonder: are humans and letters similar? If you really think about it, you might find lots of similarities. Some are tall and some are short. Some are round and some are slim. And, surprisingly, both humans and letters have ups and downs. People have good days and bad days, while letters have ascenders and descenders. Don’t know what those two elements are? Take a sit and let us tell you their story!

Ascenders

ascenders
Ascenders.

An ascender is the upper part of a lowercase letter that is taller than the font’s x-height. That upper portion rises above an invisible line known as the ascender line. Check out letters such as ‘b’, ‘d’ or ‘h’ to really visualise this concept.

Keep in mind that the ascender line is not the same thing as the cap-hight. Usually, the former is set slightly higher in order to create the illusion that the top of a letter visually aligns with the cap-height.

Descenders

descenders
Descenders.

A descender is the lower part of the letter that extends below the baseline of a particular font. For a better understanding, always keep in mind letters such as ‘p’, ‘q’ or ‘y’.

Both parts of lowercase letters, ascenders and descenders do not require any particular rules of usage, height or design. Descenders are not necessarily proportionately linked to the ascenders height. Also, modern fonts tend to minimise the size of descenders and really emphasise the heigh of ascenders.

Did you read our articles about the previous five principles of typography? Go on WhatFontIs.com, blog section, if you want to find out lots of interesting things about stress, body height, glyph width and many other elements that you are not familiar with. After this short reading break, check out our fonts collection and pick your favorites for future creative projects.

The post Principle #6: ascenders and descenders appeared first on WhatFontIs.com Playground.

]]>
Principle #5: is it a leg or a tail? https://www.whatfontis.com/blog/principle-5-leg-or-tail/ Thu, 21 Mar 2019 15:00:42 +0000 https://www.whatfontis.com/blog/?p=72801 As you probably noticed already, there are a lot of typographical terms that are alike. The difference between them might be imperceptible in most of the situations. We learned this in one of our previous articles when we talked about apertures and counters. Today, we're going to move our attention towards two new other notions that are very much similar and learn how to differentiate them. Girls and boys, let's find out more about legs and tails!

The post Principle #5: is it a leg or a tail? appeared first on WhatFontIs.com Playground.

]]>
As you probably noticed already, there are a lot of typographical terms that are alike. The difference between them might be imperceptible in most of the situations. We learned this in one of our previous articles when we talked about apertures and counters. Today, we’re going to move our attention towards two new other notions that are very much similar and learn how to differentiate them. Girls and boys, let’s find out more about legs and tails!

Leg or tail? Different, yet so similar

a leg or a tail

Typographically speaking, there’s a fine line between a leg and a tail. And, to be honest, from our point of view, the best way to learn the differences between them is throughout examples.

Firstly, let’s talk about legs. The leg is that short, descending stroke that certain letters have. Commonly thought to serve as support, this stroke has one attached end and the other one free. For a better understanding, check out the uppercase R or the uppercase K. Those two descending strokes on which the letters stand are basically the leg.

principle 5 leg
Legs on uppercase R and K.

Secondly, let’s move our attention to tails. The tail can be defined as that small stroke at the end of an uppercase Q that differentiates it from an uppercase O. In other words, this stroke often plays a decorative role, being a small detail that really makes the difference.

principle 5 tail
Tail on uppercase Q.

Why are legs and tails so important?

When it comes to mixing & matching fonts, legs and tails play a pretty important role. Besides those two aspects, keep in mind to always take into account the ascenders of certain letters. If those are too tall, they might overlap with other letter’s tails.

Looking for the perfect combination of fonts? Check out WhatFontIs, Amongst over 500,000 fonts, you can definitely find lots of awesome fonts combination.

The post Principle #5: is it a leg or a tail? appeared first on WhatFontIs.com Playground.

]]>
Principle #3: Meet typographical contrast https://www.whatfontis.com/blog/principle-3-meet-typographical-contrast/ Thu, 07 Mar 2019 15:00:16 +0000 https://www.whatfontis.com/blog/?p=72785 According to the Merriam-Webster dictionary, contrast is the difference or the degree of difference between things having similar or comparable natures. Not far away from this definition, we can come across a different type of contrast: the typographical contrast. Want to know more about it? Then keep on reading!

The post Principle #3: Meet typographical contrast appeared first on WhatFontIs.com Playground.

]]>
Contrast is, according to the Merriam-Webster dictionary, the difference or the degree of difference between things having similar or comparable natures. Not far away from this definition, we can come across a different type of contrast: the typographical contrast. Want to know more about it? Then keep on reading!

How can we define typographical contrast?

When it comes to typographical contrast, we can talk about two different aspects:

  • firstly, we can think about various ways you can combine divers fonts in order to create a hierarchy of ideas in a text;
  • secondly, we can look at the difference between the thickest and the thinnest strokes of a glyph in a particular font. Or at the differences of the stroke widths between all the glyphs of a certain font. Remember our previous two principles? A few pieces of information from there might come in handy, so check them out here: principle #1 and principle #2.

In his book called ‘Design with Type’ (1952), Carl Dair, a Canadian typographer, came up with seven types of typographical contrast: size, weight, structure, form, texture, color and direction. You can check out the book here.

From these seven types of contrast, we are going to focus our attention on three of them: weight, form and texture.

Weight

The use of different weights as part of a font combination is one of the easiest way to introduce contrast in a layout. Whether you want to emphasize something or you just want to get some visual texture, weight is your safe option. In addition, you will be able to use just one fonts in order to get this effect. Most font families have made available a range of different weight you can choose from. The result? Contrast and a neat, clean aspect.

Keep in mind: in order to get the ideal level of emphasis, try to use weight that are at least two ‘levels’ apart.

contrast within the same font
Bahnschrift Light versus Bachnschrift Semi-bold

Form

To start with, check out the shapes of the uppercase and the lowercase characters in a particular font. Why, you might ask? Well, they are the ones that establish the contrast of form for that one font. Also, they dictate the typographical tonal value of a certain block of text.

Texture

The previously mentioned form will help you get typographical texture in a layout. With a little bit of help from the type arrangement, of course. For instance, if you want a lighter contrast for your text, consider using a serif font. Serif fonts with more whiter space between characters when arranged in a text, to be more precise. Or serif fonts that tend to have a certain amount of contrast in their stroke. Those will work too.

Struggling to find the perfect contrast between fonts? Check out our ginormous collection of fonts. You’ll definitely find what you are looking for on WhatFontIs.

The post Principle #3: Meet typographical contrast appeared first on WhatFontIs.com Playground.

]]>
Principle #2: body height and glyph width https://www.whatfontis.com/blog/principle-2-body-height-and-glyph-width/ Thu, 28 Feb 2019 10:30:40 +0000 https://www.whatfontis.com/blog/?p=72740 As some of you might know, there are a few ways you can measure up the size of a character. The most common one implies two different aspects that you must take in consideration: body height and body width. Today, we're going to spice things up a bit and move our attention to another way of determining the size of a character. Dear readers, meet glyph width! 

The post Principle #2: body height and glyph width appeared first on WhatFontIs.com Playground.

]]>
As some of you might know, there are a few ways you can measure up the size of a character. The most common one implies two different aspects that you must take in consideration: body height and body width. Today, we’re going to spice things up a bit and move our attention to another way of determining the size of a character. Dear readers, meet glyph width!

So, what’s the difference between body height and glyph width?

Once upon a time, in a land far, far away, fonts were set in hot metal in various ways. Because of this, each and every single glyph was placed on a designated metal block. We can consider this block to be the body of the glyph.

Nowadays, the typographic landscape is a bit different. But keeping in mind the image previously described will help us better understand the difference between body height and glyph width.

Let’s step into the virtual landscape of a Word Document, for instance. When choosing a point size, we are actually establishing the body height of the font we are going to use.

Now let’s go back and think about the letters on the metal blocks. Got that picture in mind? The glyph width represents the width of that particular metal block.

Glyph width for fonts.
A visual representation of body height and glyph width

When it comes to proportional fonts, there’s one golden rule you’ll have to remember. The body height is constant, while the glyph width may vary quite a lot. How is that? Well, let’s focus on ‘i’ and ‘e’. When you write them down, you can automatically tell that ‘e’ is wider than ‘i’ and by default occupies more space. Meanwhile, the body height for both characters remains constant.

The glyph width is also visible between different styles of the same letter. Let’s take letter ‘g’, for instance. In one particular font, there are a few different ways of writing down ‘g’. This depends very much on what might follow after that ‘g’ and how these two letters will relate to each other. Due to this aspect, the width of ‘g’ varies while its height remains constant.

Why should we pay attention to the glyph width?

Knowing things about the glyph width might come in handy in lots of situations. Off the top of our head, we are going to mention some of them.

  1. When placed side by side, between one font with a regular glyph width and a font with a wide glyph width, the second one is going to emphasise better the idea you want to transmit.
  2. If you don’t have a lot of space to place a particular text, you might take into account a fond with a narrow glyph width.
  3. Most important, always take glyph width into account when combining different fonts. Especially when it comes to two different fonts that are going to be used together at the same body height.

In case you missed out on our article about the first principle, check it out here: Principle #1: Let’s talk about stress and letters.  You’re definitely going to love it!

The post Principle #2: body height and glyph width appeared first on WhatFontIs.com Playground.

]]>
Principle #1: Let’s talk about stress and letters https://www.whatfontis.com/blog/principle-1-lets-talk-about-stress-and-letters/ Mon, 18 Feb 2019 12:11:44 +0000 https://www.whatfontis.com/blog/?p=72716 Let us tell you some breaking news: fonts are stressed to. Not by briefs or by clients, but due to the pressure points certain letters have.

The post Principle #1: Let’s talk about stress and letters appeared first on WhatFontIs.com Playground.

]]>
Being a creative in an agency can be stressful. Beautiful, but stressful. You know what we’re talking about: tight deadlines, impossible briefs and random days when inspiration refuses to appear. Despite the huge amount of empathy we have for all of you, today we’re not going to talk about this kind of stress.

You might be wondering: well, what’s up with the title? Breaking news: fortunately (or unfortunately), fonts are stressed too. Not by briefs or by clients, but due to the pressure points certain letters have. I know this might seem impossible or a bit unusual. Let’s dig into this different type of stress and see what it’s all about.

How do we define stress?

Stressed uppercase O written in Garamond

Merriam-Webster dictionary defines stress as emphasis, weight. Judging from a typographic point of view, stress is the transition angle between the thickest and the thinnest points in a character’s stroke. We can measure stress by drawing a dotted line – an axis – that connects the thinnest points in a character (as you can see in the picture up above). This axis can be vertical, diagonal and ever horizontal (also known as reversed stress).

Why do we have so many fonts with stressed letters?

Basically, fonts that have stressed letters are predominant. The main reason for this dates back in the 15th and 16th century. The old Roman fonts that appeared back then were based on handwritten letter forms. When people used to write a lot by hand, letters used to have a moderately variable stroke width and a left leaning stress angle. Due to this natural way of writing, letters tend to get a diagonal stress.

Times went by and new fonts appeared. In the 18th century, people used pointed nibs to write, therefore creating the Modern Serif fonts. The obtained letter had a vertical stress. As a fun fact, fonts with little or no stroke contrast at all are also vertically stressed.

Keep in mind! Our allies when it comes to identifying different types of stress are uppercase “O”, lowercase “o”, uppercase “Q” and lowercase “e”. These letters will help you identify easier the angle of stress because of their easy to see thinner points.

Combining stressed fonts

Combining fonts can be an extremely difficult task. From finding fonts that match with each other until coming up with a balance between them, you have to take into account a lot of aspects. Now, we are going to focus on how to combine fonts based on their stress.

If you want to combine fonts stressed differently, remember that stress can help you:

  • create harmony;
  • create a visual juxtaposition between fonts.

In other words, if you choose them right, fonts will complete each other perfectly.

One good example is the combination between the Garamond Premier serif font (check it out here Garamond Premier) and the News Gothic sans serif font (you can find it here News Gothic). You can find these two fonts and many more on WhatFontIs.com.

The post Principle #1: Let’s talk about stress and letters appeared first on WhatFontIs.com Playground.

]]>
Typography Rules You Should Know as a Designer https://www.whatfontis.com/blog/typography-rules/ Mon, 30 Jul 2018 11:01:57 +0000 https://www.whatfontis.com/blog/?p=72416 Graphic design typography, however, comes with a clear set of typography rules. No matter how good you think you are or how inexperienced you are, it’s never a waste of time to remember the typography rules because they transform your creativity into an effective design.

The post Typography Rules You Should Know as a Designer appeared first on WhatFontIs.com Playground.

]]>
Typography can set the tone of your overall design and impact the readers’ perception of your project and understanding of your business message. As an art, typography requires a set of well-honed design skills in general and in-depth knowledge of typography in particular.

Graphic design typography, however, comes with a clear set of typography rules. No matter how good you think you are or how inexperienced you are, it’s never a waste of time to remember the typography rules because they transform your creativity into an effective design.

If you want to know how to do typography correctly, you need to learn about the particularities of typography and the various types of typography. You also need to understand that sticking to the basic rules of good typography doesn’t involve sacrificing your creative freedom.

Master Knowledge to Master the Typography Rules

Typography is both an art and a science and, while creativity is a gift, mastering the practical details of good typography involves a complex learning process of the ins and outs of the structure of typography and a profound understanding of typography art definition.

Typography study is about learning and understanding the specific vocabulary, precise measurements, and main specifications of typeface composition. Typography study allows for the rules of good typography to set in and become an extension of you as an artist.

The advantage of knowing the rules of graphic design typography and mastering the nuts and bolts of typography is that you become empowered with the knowledge to break these typography rules deliberately with the express purpose of developing a concept of significance.

The Significance of Typeface Choice

There is this tendency to reduce the complexity of the typography art to a simple matter of randomly choosing fonts based on aesthetical considerations, which suggests that font choice has no consequences on typography design layout, call-to-action, or overall design.

Seasoned designers are fully aware of the significance of typeface choice and how it is by no means a matter of personal preference. Each font has its character, a personality that transcends the screen, reaches out to your audience and triggers a specific reaction/emotion.

If you want to know how to make typography art effective, not just appealing, you need to get an insight of how fonts relate to your audience. Armed with that understanding, you must make a different font choice to get across a specific message to a particular audience.

What does that tell you? People are advised to dress for the occasion. Think of your font choice as the outfit of your typography design project and think of your audience as the occasion. In the end, what is typography in graphic design? The outfit of your whole design. Makes sense?

There are many typography tips out there in the virtual world and one that makes a powerful statement refers to matching your font choice to your target market. Are you designing a typography advert for a rock and roll party or are you designing the website of an organic farm?

Deepen Your Knowledge of Kerning

Veteran graphic designers know how important it is that you grow to be a virtuoso of kerning because clumsy kerning can ruin your overall typography design. Kerning embodies the fine adjustment of the tiny space linking any two letters to craft a visually slick copy.

Each letter has its personality and combines with differently with a different letter. Kerning is not a mathematical process that targets mathematically equal spaces between letters but a visual exercise that seeks to accomplish aesthetically even spaces between different letters.

Different typography fonts will require different kerning approach, as will different letter combinations. Remembers that graphic design programs can only help you so much and the magic touch needs to come from the artist in you that will develop an eye for kerning blunders.

Kerning errors have a subtle visual impact when it comes to lengthier copy and programs such as Illustrator may handle the kerning process well enough. However, logos or headlines require manual kerning because the visual impact of kerning errors weighs down your whole design.

Refrain from Using Too Many Fonts

Newcomers to the design trade have a propensity for exhibiting their design skills by abusing typography fonts as far as variety goes. It is a frequent slipup that should be fixed because too many different fonts will cause your design to appear too dense, relatively tedious, and chaotic.

Three is the magic number when it comes to typefaces: one font for the headline, one font for subheadings, and one font for the body. Tip: pick fonts from visually distinct font families. Using fonts that are too similar may be regarded as a sloppy mistake and not as a calculated pick.

Understand Correct Typography Alignment

There are four possibilities for proper typography alignment, irrespective of the typography fonts or the graphics program you are using: Center Aligned, Left Aligned, Justified Aligned, and Right Aligned. Center and justified alignments are on a little on the difficult side as far as readability.

The most popular and effective choice is left alignment, often referred to as Flushed Left.  It is the most comfortable choice on the eyes and therefore the preferred pick of the designers. The justified alignment is every designer’s nightmare while Flushed Right requires quite a lot of work as well.

Both Flushed Right and Flushed Left alignments generate the same problem that needs to be fixed: ragged left or right margins. Sometimes, playing with tracking, line measurements, and other typography design elements can help you control typography alignment effectively.

As a non-designer or as a beginner, you may be tempted to go for center alignment that subconsciously suggests balance and people love balance. The truth is that center alignment should be used exceptionally because it is an untidy alignment that impairs legibility the most.

Master the Art of Visual Hierarchy

Typography allows you to make use of visual hierarchy, i.e., to emphasize a specific line of type over another. You offer information to the reader in the order of its importance, which is the exact order in which you want the different information of your design to be communicated.

Visual hierarchy in typography is about steering the viewers’ eye movement through your design in a way that allows them to identify certain wedges of information at the appointed time. Make visual hierarchy your priority and your design will not appear confusing and messy.

Size Does Matter in the Typography Arena

As a designer, you know you can count on 1-2 seconds to grab the reader’s attention in this field. Use larger fonts for the typography fonts of your headlines and logos because those are the lines that can make the difference between winning and losing a potential client.

Mix Fonts Skillfully and Cleverly

While a smart mixture of typography fonts has the power to enrich and boost your design, a clumsy attempt at mixing typefaces can quickly ruin your overall design. It’s just like preparing a salad of ingredients that complement each other perfectly as far as color, texture, and size.

Bring Readability into Play

Designers may be so drawn to the creative aspects of their font choice that they fail to cater to its readability. Don’t let aesthetic preferences allow you to choose looks over legibility. Fonts should enhance readability because words have no value if they look nice but are not legible.

Avoid Grammar Errors at All Costs

Perhaps it should have been the first rule of design, more important than choosing the right typographic fonts, but the truth is that typography needs all these aspects taken care of to be perfect. Ignoring the importance of correct grammar in your typography is bad. Really bad.

Before making any other typography choices, such as picking your typography fonts, make sure you have catered successfully to all the grammar needs of your text. Then and only then can you can start working your magic on the final, error-free version of your text content.

Adapt your typographical choices to the content of your text and not the other way around. Typography is about conveying a message to an audience, a message that needs to be read first. It is all down to using the elements of typography to make your text visible to your reader.

Stay Away from Distorting Fonts

There are so many details to take of when it comes to typography fonts that, sometimes, designers choose an easy fix for some of the problems that they are facing. Once you’ve managed to identify the one perfect font to match your content and design, don’t ruin it!

Text may not always fill perfectly a text box and stretching/condensing content may seem like a practical fix. In fact, doing so breaks up the balance of the typeface of your choice. Its features have been built with care and attention to achieve a specific look and performance.

These unique characteristics give your font a certain personality, and this personality triggers the emotional response you are looking for in your specific audience. The unique features of your font choice represent the very reason you picked it out of a pool of typography fonts.

Ending thoughts on typography rules

Typography doesn’t look so simple anymore, does it? It takes skill, involves a lot of learning, and has quite a few typography rules that you need to learn how to navigate. It’s not as simple as it looks at first glance but sticking to these guidelines will make a huge difference in the quality of your design.

If you enjoyed reading this article about typography rules, you should read these as well:

The post Typography Rules You Should Know as a Designer appeared first on WhatFontIs.com Playground.

]]>