We encounter typography everywhere on a daily basis. It is on your street, at home, on your mobile phones, laptops, books, etc. and in these forms of texts.
What fascinates the majority of people about typography is the aesthetics of different typefaces and how designers use different texts to convey messages to their audiences.
Typography speaks louder than words. Different typefaces dictate the mood and tone of the design and sometimes typography itself changes the aspects of designs.
What Is Typography?
Typography is one of the main components of every design. This article showcases the essential elements of typography, typefaces, why do we need it and the importance of typography, aesthetics, function of typography, responsive and fluid typography.
Essential Elements Of Typography
There’s a common misconception that typography is easy and simple but people don’t know that when a designer works on a design, they have to consider a lot of things and one of them is the screen resolution whether it is more or less homogeneous.
Today we deal with a variety of screen sizes and resolutions. This makes things much more complicated which is why a designer should master the essential elements of typography. Moreover, Before a designer starts providing design services, they should perfect the basics of how to use typography correctly, because once you perfect the basics of typography, it will provide a better outcome and you will make fewer mistakes.
The Letterform
Point size
Points are used to measure the size of type, and one point is 1/72. The point size does not depend on your preference. It depends on the reading distance. When I work on texts for a book design I usually use a 10 point type size because it is easily readable and while reading the distance between the reader and the book is very short. The majority of the book comes with a type size of 10 point size or slightly larger than that. Since computers generally are further in distance than a book, the size of the metric of design needs to be bigger than the printed books.
Baseline, Median and Cap Height
The baseline is the imaginary line upon which a line of the text rests. In most typefaces, the descenders of g or p are below the baseline.
The median is where the majority of your lower case letters should reach. It is also known as x-height because it is set from the “x” of your font.
Cap height marks the visual height of the capital letter in a typeface. It is not the ascent of the typeface.
Ascenders and Descenders
The ascender is the upward stroke above the x-height in a lowercase letter like d, b, or h. It should touch the ascent. The descender is the opposite: it reaches from the baseline to the descent in letters like q, p, and j.
Ascent
This is the topmost line that the upstroke from lowercase letters such as l, h, and d should reach. Not to be confused with the cap height which is the apex of your capital letters.
Descent
Some characters such as p,q,g, and j their stokes go below the baseline, the descent marks the lowest point their lines meet.
Weight
Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights, and four to six weights is a typical number available for a typeface.
Types of weights:
- Light
- Regular
- Medium
- Bold
Letter-spacing
Letter spacing also is known as tracking refers to the uniform adjustment of space between the letter of the text.
Larger text such as header or headlines uses tighter tracking so that it can be easily readable and there will be less space between the letters.
Smaller texts such as the content use looser tracking which can improve readability as more space between letters increase contrast between each letter shape. Text in all caps, even at small type sizes, has improved readability because of its added letter spacing.
Kerning
Kerning is the adjustment of space between letters in a word to increase the overall legibility. It can be applied to two specific words that need a clear visual alignment.
Leading
The spaces between the baselines are known as leading. Sometimes software automatically sets the spaces of baseline to 120 percent. Narrow leading can make the line of the text appear crowded, and Wide leading will make the paragraph look more like black and white lines instead of the body of the text.
Line Length
Line length refers to the number of characters in a line of text before the line “breaks” and continues to the next line. It can be tiresome to read if the line length is too long. I try to keep a line between 35 to 65 characters long when working with body text, it will provide comfort to the reader while reading.
Typefaces
Font vs Typefaces
A typeface, also known as a font family, is a set of fonts. A typeface contains all of the different variations of a given font such as bold, light, italic, condensed, etc. A font is a specific variation of the font family, such as Helvetica Light.
People get confused between the difference between a typeface and a font. Some people think that font is the set of font family and typeface is a specific variation of a font family. I myself encountered this problem but now I am aware of the difference between a typeface and a font.
Text type vs Display type
Text type is a type that is intended for presentation between 6pt and 12pt font size.
Display text is typically meant to draw attention from the crowds because the text size is 18pt or more. It is more characterized than text type and it is hard to read when the font size is under 18pt.
Serif
A serif typeface has “serifs” or sparse projections, at the end of the letterform that often resembles the shape of a pen mark. Examples of serif fonts are “Times New Roman” and “Georgia”. There are some ways to identify what a serif font looks like:
- Serif characters have low contrast between thick and thin strokes
- They have medium-high x-height
- Vertical in strokes
- Bracketed serif
San Serif
San serif typeface is those without the serif. Example of san serif fonts are “ Arial” and “Helvetica”.
- Grotesque: Low contrast between thick and thin strokes, vertical or no observable stress
- Medium contrast between thick and thin strokes, slanted stress
- Low contrast between thick and thin strokes, with vertical stress, and circular round forms
The Importance Of Typography
Typography In Graphic design
Typography in graphic design can strongly affect how people react to a document. Careful selection and consistent use of a chosen typeface can be just as important as the use of graphics, color, and images in creating and solidifying a professional brand.
In order to use typography to your advantage, you must anticipate how the use of fonts and styling can influence the audience.
Thoughtfully using typography can evoke the right emotion and tap into the mind of the audience.
Typography In Web design
People know that content is one of the most important parts of the website. While designers focus working on the visuals and the hierarchy of the website, they often forget to focus on typography, especially when the content is the central figure of a website.
On some occasions, designers use typography for visual purposes rather than reading purposes which is good because we can use typography for vector art.
Typography In Branding
The use of colors in branding is equally important to the text in typography. Anything in your brand that includes text from your logo, social media, web sites, packages is typographic. It plays a larger role than you realize. Typography in the brand communicates.
The fact that large corporations use only typography in their logos instead of text symbols indicates the importance of typography and it shows the impact fonts can have. It elevates the brand identity to look better and people will look at it longer.
Logos can be divided into three types of designs:
- Only visuals
- Only typography
- Combination of both typography and visuals
Typography In Editorial Design
Typography is a very important element in the editorial design as the majority of the editorials consist of text. Books, newspapers, magazines, online publications and other editorial media consist of a lot of text. If not given enough attention to typography, no matter how good your illustrations, photos or other graphics designs are, it will turn your work to less than rocking. It will turn the reader away. Always carefully select your typeface for any editorials because the main goal for editorial is for people to read the content easily.
Typography In The Advertising Industry
Typography is a key component in the advertising industry. Creative typography is as important as other aspects like colors, shapes, etc. It is a primary medium through which a company carries the message they try to convey to their targeted audience.
A brief survey of any billboard, poster, flyers or any other advertising medium demonstrates that the use of typography to pass on the message is one of the most important parts of advertisement.
There are several elements that come together to form a perfect advertisement.
People should undermine the value of text and visuals.
Aesthetics of Typography
The thing about type is that it looks easy and simple but it takes a tremendous amount of trial and error. It’s an old what if principle (what if you try or that). And most cases designers can’t really tell if it’s good unless they have tried other types of fonts for that particular design.
Responsive typography
Responsive typography is the use of fonts that adapt to different screen resolutions so they are readable, with overall layout intact. Unlike using a separate font for a mobile site, you are using fonts that are complex as you like, which will stretch and shrink depending on the screen’s size.
Fluid typography
Fluid typography resizes to any screen’s width. It is an intuitive option for a website that supports infinite sizes of the screen but designers prefer responsive typography over fluid typography.
The concept of having “fluid” anything is often at odds with deep root century-old typography. In print, dimensions have always been fixed, but they don’t need to be on the web.
OpenType Variable fonts
An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file. A variable font is a single font file that behaves like multiple fonts.
A variable font is a single binary greatly-reduced comparable fie size. This means more efficient packaging of embedded fonts. The technology behind responsive typography is called Open Type Variable font.
The Basics
An Open Type variable font contains one or more axes that each provide a particular variant between different extremes of a variable typeface. The format also allows for the possibility of intermediate designs, for the whole glyph set or for individual glyphs, to provide finer control over the design as it changes across the variations design space.
Conclusion
Typography Definition – a designer should know the contours of a font. The letter form is the component that makes up a text in a sentence. Typefaces are a set of one or more of fonts combined glyphs and fonts.
A serif typeface has “serifs” or sparse projections at the end of the letterform. San serif typeface is those without the serif. Typography plays a very vital role when it comes to graphic design, web design, branding, editorial, and advertising because it used for conveying the message through texts.
A designer needs to make sure that the font being used is readable.
Responsive typography is something quite new, very less people know about it. The techniques needed for responsive typography are still in the developing process.
Fluid typography resizes to any screen’s width. It is an intuitive option for a website that supports infinite sizes of screen.
An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file.
[text-blocks id=”59336″]
