We use cookies to ensure you get the best experience on our website. By continuing to browse on this website, you accept the use of cookies for traffic analysis, advertising, and service delivery.
Commerce Puzzle
The Basics Of Typography
- December 12, 2018
- , 1:10 am
- , Blog, Business 101
Welcome To Typography 101
The basics of typography, the art of choosing a font family, and a few places to download free fonts will all be covered in today’s article. Typography, by definition, refers to the art of placing and manipulating type to be appealing to the eye. The term “type” is essential because it encompasses more than just letters. As you familiarize yourself with the basics of typography, you will quickly learn that numbers and symbols are a big part of the overall expression and play by similar rules. Below we will examine font families, font styles, weight, alignment, structure, spacing, and more. By the end of this article, you will be able to use typography to your advantage when marketing, making a statement, posting, or designing!
The 5 Guidelines
Although guidelines are not a necessity when adding typography in programs like Adobe Illustrator and Adobe Photoshop, the general structure is something that is universally followed. The 5 guidelines are the cap line, the ascender height line, the midline, the baseline, and the descender height line. The basic rules of typography state where the top and bottom of each letter will sit within the given guidelines, here is an example of the structure it produces:
Hierarchy
As we continue to learn the in’s and out’s of typography, it is important to note that many variations exist strictly to influence hierarchy. When it comes to the typography world, hierarchy refers to the process of ranking the text regarding its importance by tweaking the design. Below, we cover a commonly used hierarchy system in web design. Notice how your eyes naturally gravitate towards the title, and then proceed to read the tagline before taking in the body. Altering things like font size, weight, and family, can guide the reader through your work (or advertisement), controlling the pace that the content is ingested:
How Fonts Make A Difference
When it comes to transferring emotion, your font family is everything. Thin fonts often leave a clean and spacious canvas that radiates luxury. Bold fonts are used to attract attention, usually reserved for titles and headings. Beyond that, designers use a full range of font families with a variety of personalities to transfer emotion in the most efficient way possible. Below we have reconstructed the same sentence in a few different font families. As you can see, even a subtle difference in your font can change the impact of your message:
Typeface Classifications
The basics of typography are hard to understand without having a good grasp on the classification system used to group fonts into their respective categories. There are four standard groups used to categorize fonts: serif, sans-serif, script, and display. Beyond the four standard groups, each group also contains subcategories which narrow down the style even more. For example, the blackletter subcategory belongs to the script group. It may seem intensive, but having labels for each style helps designers compare, contrast, and combine 1000’s of fonts in a fraction of the time. Let’s take a closer look at the four standard font groups below.
Serif
Serif fonts contain extra lines at the end of each character’s stroke. Known as the go-to font for advertising, serif fonts have been proven to be the easiest font group to read. Due to the variety in width, serif fonts are the most popular choice for body text, by far.
Subcategories
- Old Style
- Transitional
- Neoclassical & Didone
- Slab
Sans-Serif
Sans-serif fonts, which merely means without-serif, do not contain any extra lines at the end of each character’s stroke. These fonts appear clean, futuristic, and progressive. Businesses often use sans-serif fonts as headings or singled out words and phrases. The real difference between the many varieties of sans-serif fonts is how round or square the designers makes the corners.
Subcategories
- Grotesque
- Square
- Humanistic
- Geometric
Script
Script fonts are defined by their handwritten style and requirement for a nice fluid stroke. Although not all script fonts are cursive in their entirety, the group as a whole is heavily influenced by older writing. Script fonts are generally used for specialty marketing occasions, such as a postcard. Script typefaces are a notoriously bad choice for body text, so it is recommended that you use it sparingly.
Subcategories
- Formal
- Casual
- Calligraphic
- Blackletter & Lombardic
Blackletter
Blackletter fonts are a subcategory of script fonts. Recognized for their place in history and literature, blackletter transfers a particular kind of emotion when used correctly.
Display
Display fonts are usually large, bold, loud, and fantastic at stealing the show. The font group got its name from its performance as a heading piece and advertising tool. In fact, the font group did not exist before the rise in popularity of music and movie posters. Like script font, it is not recommended to use this for your body text.
Subcategories
- Grunge
- Psychedelic
- Graffi
Tracking
Tracking is a designer’s fancy way of referring to the amount of spacing between letters. The higher your tracking number, the greater the space between all of the letters in your text.
Tracking is used a lot in fields of luxury. The individualism and spaciousness brought to life by extending your tracking give off an expensive feel. As a general rule, the longer your line of text the more critical it is to utilize a bit of tracking to promote readability.
Kerning
Kerning is identical to tracking, except it refers to the amount of space between two letters. The higher your kerning number, the greater the space between your selected characters.
Kerning is often used to correct minor spacing issues when two letters that are not compatible come one after the other.
Alignment
Alignment in typography is used to decide where your text will start and end. Align horizontal left, and your text will hug the left side of your screen to begin each sentence. Align horizontal right, and your text will hug the right side of your screen. Align horizontal middle and your text will float in the center of the screen, giving a balanced view.
Color
Although color is a large part of typography, it is an area that we think should be free from almost all design standards. There are general art rules to follow, but we encourage you to try out as many variations of your company colors (if you chose to use color) as possible.
Combining Font Groups
As your business gets more comfortable utilizing design, combining font groups to get the desired effect is something that most companies take advantage of. Although there are general rules to follow, there is no globally optimal combination that is proven to improve your bottom line. Below, examples A and B serve as great options for a general typography structure. However, example C is known to not perform well due to the difficulty in reading the text in the body.
Adobe Illustrator
Typography is by no means native to Adobe Illustrator, but designers around the world consider this vector-based program to be an excellent choice for branding, art, and beyond. You can try the newest version of Adobe Illustrator for 7 days, completely free, with no need for a credit card. Click here to give it a try. After you start your first project, we suggest referring to the diagram below to help you navigate through the Adobe Illustrator character panel. In the character panel, you will find your typography essentials, such as font family, font style, font size, and a few of the terms we covered earlier in the article. Knowing away around this panel will give you a big head start in your typography journey.
Where To Find Free Fonts
Typography can be an expensive venture, but it does not have to be. There are plenty of quality companies out there that offer free font downloads. Font websites let you navigate through their database by using the classification systems that we discussed above. If you are new to design, or you are a business owner looking to take on a new responsibility, free font databases provide more than enough choices to produce beautiful projects. Below, we will cover 5 of the most popular free font databases heading into 2019. It is important to note that although these websites have options for purchase, the vast amount of free quality fonts still remains true.
1.) 1001 Free Fonts Fonts
With over 41,000 fonts and new ones added daily, this massive database and easy to use website are designer favorites. Click here to head to their site.
2.) DaFont
Boasting over 38,000 font choices, DaFont remains one of the most popular sources of free fonts today. With good a classification system, this website is truly a breeze. Click here to head to their site.
3.) Font Squirrel
With a team constantly scouring the internet to add free fonts, Font Squirrel shows their passion for design in more ways than one. When you visit their website you can expect to find an active blog section and an area to purchase Font Squirrel apparel. Click here to head to their site.
4.) Urban Fonts
Featuring perhaps the cleanest user interface of all, Urban Fonts is fun to use. With a smooth live preview feature, see what your font looks like before you download it. Click here to head to their site.
5.) Font Space
With 1.25 million members and over 2,500 designers, you cannot go wrong by spending a bit of time browsing this database. Click here to head to their site.
Share It
Tweet It
Link It
Email