Design is really all about appearance and function.
Typography has been an important part of functional design for centuries and great typography can still provide a great user experience today.
Unique typefaces can also assign character and identity when marketing brands and organizations.
In the old days, typography was the art of the printing press typesetter – setting type by arranging moveable tiles. During the industrial revolution, communication on a mass scale became possible for the first time. Typography, in one form or another, has existed since the earliest human civilizations.
The rules of traditional typography apply to modern design
Modern designers of typography owe many of their available resources to the invention of the printing press. Much of what they work with in 2019 exists because of the revolution which occurred back then. Many of the typefaces used today are a result of the invention of the printing press. Printing brought about a multitude of typefaces. Their enduring widespread use is testament to both their practical, readable beauty and the skill of the people who designed them.
In the last few decades we’ve seen something comparable to the invention of moveable type and the printing press. The advent of modern printing completely revolutionized communication. Computers and mobile phones have enhanced our ability to spread information almost immeasurably. There are striking similarities between then and now. Web and graphic designers are part of the same tradition of typography which started on an industrial scale back in the 15th century. Although, it’s true that most don’t often think of it like that.
An understanding of the basics of typography can improve any modern web design or present day brochure. So, let’s look at eight tips which will help you apply the principles of typography to your own work.
1. Custom, new and standard typefaces
As we’ve already touched on, some of the most popular typefaces have been around for hundreds of years, and there’s a reason for that. The typefaces which have endured are beautifully designed and readable. When you’re choosing your own typeface for a project, you can do a lot worse than sticking with the tried and tested.
Custom and new typefaces are being designed all the time. There are many sites where you can get hold of new typefaces, ready to use for no cost. If you’re serious about making something beautiful, unique and very readable you may even want to buy a new typeface from a designer.
Sometimes, having a unique typeface for your design is necessary. In which case, you may want to try designing your own custom typeface from scratch. This requires that you commit to investing a great deal of your time and talent, but the end product will be something completely new. If you go about it the right way, it will also be beautiful and reflect exactly what you want it to.
2. Invest some time or money
Sometimes in graphic and web design there is no substitute for having the right tools. As already mentioned, a lot of the best new typefaces will cost some money. The same goes for software.
There are some free resources online for customizing typefaces – including basic 3D typography. You may feel your project needs something a bit different. If you can’t commit the time required to design a new typeface but want something that’s been designed by a professional, there are solutions out there. A great place to start looking is Typewolf’s resources page. This offers links to designers and websites producing and selling new fonts and typefaces.
Not all programs give you the ability to create new letterforms and then export them as a font. For instance, if you’re a regular Adobe Illustrator user, creating a new typeface will require a switch in software. If you do commit to the process of designing your own typeface, Glyphs and Robofont are two good options.
An alternative to spending money is doing research. The more time you invest in searching out beautiful typefaces, the less money you’ll have to spend creating a new one. Whether you get there with research or by spending some cash, it’s a great idea to start your project off on the right foot – with good raw materials and tools.
3. Pairing typefaces
Start by understanding the anatomy of a typeface. Get to know the terms, develop an understanding of how individual parts make up the whole. The better your ability to distinguish elements of a letterform, the more accomplished your results will be.
There are many ways to use contrasting typefaces to create interesting and attractive work. Pairing typefaces can be a tricky business and subtlety is key. Try looking at completed webpages and designs. Pay careful attention to the anatomy of the typefaces used. Selecting typefaces can be all about concentrating on the fine details. Letterforms are the basic components of the typography you’ll produce, so that’s a great place to apply detailed analysis. Typewolf provide some excellent ready made typeface pairings.
4. Legibility versus decorative typefaces
It can be tempting, when you first decide to delve into the wonderful world of typefaces and fonts, to go a bit crazy. This is where the digital world can work against a designer, because there are so many instanty available typefaces.
An important aspect of typography is that decorative can often mean illegible. Exercising some restraint is wise when choosing typefaces. It’s best to avoid too much use of novelty typefaces, and even script style fonts and handwriting styles. Remember at all times that functionality and readability are a very important part of good typography. Don’t go overboard.
Hierarchy is a great place to begin assessing how readable a passage of text is. It can create visual cues which alert the reader to the importance of different elements of a message and make it more engaging. Hierarchy makes a layout look more interesting and welcoming.
Well-written headings convey a lot about paragraphs. When you’re writing for the web, this is true for readers, but also for search engines.
Headings and hierarchy work so well because they let a skim-reader decide quickly if this text is what they’re looking for. For search engines, header tags provide the information they use to rank and classify a site.
One way of looking at hierarchy and headers is that the former is providing function and information for humans, whilst the latter is doing the same for search engine crawlers. Let’s look at an example of how we might use headers H1, H2 and H3:
Search engine optimization 101: Headers H1 to H6 provide hierarchy for crawlers
My H1 heading is the definitive description of my piece of writing, and the header with most authority. A search engine finds out what my content is about by reading my H1 heading – not my body text. My H2 header is subordinate to my H1 heading but reinforces the information it contains. I can even include variations on key words in my H2 heading.
SEO can increase web traffic by using each header effectively
Search engines rank content based on what headings say. They can obtain further information about your content by scanning your H2 heading but attribute less weight to it than your H1 heading. SEO can seem tedious to creatives like designers and writers but it’s the way the internet works.
Good web design means using headers to increase views and rank higher for SEO
In the body text under my H3 heading, I might sum up by saying that when using typography on the web, there are two aspects of hierarchy to consider. The first is the more traditional role, which is all about design, function and appearance. The second is all about making your design mean something to the search engine crawlers. Combining these two elements is a necessary consideration for designers looking to get visible on the web.
6. Kerning, tracking and leading
Leading is all about the space between the baselines in texts. This can have a big influence on how readable passages are. Pay attention to the tweaking and adjusting of leading.
Kerning relates to how much space there is between individual letters within words. To truly tune typography and make it read beautifully, it’s very important to look at kerning. Designers who pay attention to detail, pay attention to kerning. It can make a massive difference to how professional a piece of work looks.
All of us are affected by kerning, but the average internet user is rarely aware of it. A great example of kerning was when Google made a minor adjustment to their famous logo a few years ago. The change consisted of nothing more than moving the lowercase G one pixel to the right, and shifting the letter L a pixel down and to the right.
Kerning is all about subtlety. Unless you work for Google, tweaking a pixel here and there probably won’t get you on the news – but kerning is a great way to make a positive difference to the appearance and readability of your designs.
Tracking is a bit like kerning, but it relates to the space between letters throughout the complete text. Again, it’s very relevant to making text readable and attractive, so it’s well worth making adjustments.
7. Paragraph setting, justified text, orphans and widows
If you really want to take the typography elements of your designs to the ultimate level, you need to work on your body texts and paragraphs.
Designers love to work on their headings but often, they neglect to examine paragraphs and body text in enough detail. Great gains are possible when you take time to address the appearance of body text.
You can use subtle differences in spacing and even hyphenate words in order to stop the right hand edge of a paragraph appearing ragged and untidy. Mostly, left-aligned text is used to create paragraphs. It’s not always possible to have a perfectly alligned right-hand edge. However, it’s worth making it appear neat and tidy, and that’s much easier on the reader’s eye.
Justified text is another option, and this can be a great way to make body texts look stunning within the right design. Justifying texts means creating even spacing between words on a line, to fill the whole line.
Orphans and are words which occur alone on a line at the beginning of a page. Widows are words which fall at the end of a paragraph, also alone on a line. Both are easily avoided with a bit of fine tweaking, and it’ll be the best couple of minutes you ever spent on a design.
8. When looking forward, remember to look back
Modern technology has given us tools which have amplified our ability to distribute typography. Today, the machines on which we view news and read books transmit information at the speed of light. Text displayed on mobile devices is interactive and responsive. Yet, the basic priciples of typography remain the same, and they’re as relevant today as they ever were. Legibility, beauty and function are as important for making typography effective in 2019, as they were centuries ago.