TYPOGRAPHY
What is Typography?
Typography is not the art of scrolling through a dropdown menu until you find a font that looks like it could work. There is far more to it! Typography is the art and technique of arranging type, type meaning letters and characters.
It's about more than just the design of letters and characters; the arrangement of those letters and characters is just as big a part of it all. That refers to the selection of point size, line length, and spacing, both on a single line and throughout an entire page or piece of work.
To understand where the importance of arrangement comes in, I like to think back to Johannes Gutenberg's printing press. At one point in time, people practiced typography using printed materials -- meaning they were literally taking letters and characters and arranging them in physical space.
Today, thanks to computers, open source fonts, and scalable computer typography, it's a lot easier to arrange letters and characters. But that physical piece remains important, even in the digital sphere.
Why is Typography important?
Typography is absolutely everywhere. Just look at your phone, a billboard, your coffee cup, or even the different styles used in this blog post. Every font, letter, and character arrangement plays a part in determining how a message is conveyed.
Sure, it might seem trivial at times, but even the smallest of type adjustments can impact the look and feel of your work. For example, Facebook tested a new font on its users called Geneva. While the new font was only slightly thinner and lighter than the original, Helvetica, it made a noticeable difference to some. The overall effect is a lighter, more modern looking block of text.
In fact, one of the only college courses Steve Jobs took was on calligraphy and typography, which he believed played a critical role in the success of Apple. As he once said in a Stanford University commencement speech, "If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts." Can you imagine a world where Apple products didn't have a focus on beautiful design? I certainly can't.
Once you realize how much thought goes into carefully selecting a typeface, it becomes much easier to recognize the differences between typefaces and understand why they might’ve been chosen in the first place. Take a look at some of the examples below to get a better sense of what I mean ...
Typography Definitions & TermS
Typefaces vs. Fonts
If you thought these two words were interchangeable, you're not alone. But they actually mean two different things.
Typographer, Nick Sherman, once used a great analogy to explain the differences between the terms “typeface” and “font.” He suggested comparing these typography terms to the musical terms “song” and “mp3.” When you’re explaining how much you enjoy a particular tune, you say, “I love this song!” You wouldn’t say, “I love this mp3!” The song is the work of art, whereas an mp3 file is just the delivery mechanism.
The same rules apply in typography. You should use the word “typeface” when describing the creative work (i.e., what you see). This is a more abstract design term used when referring to the way a specific collection looks or feels. For example, Helvetica is a typeface.
If you’re describing the physical embodiment of the collection of letters and characters, you should use the term “font." It refers to what you use -- whether that’s a file on your computer or a case full of metal letters. This is the tangible representation of that collection of letters and characters. For example, Helvetica Bold and Helvetica Light Oblique are fonts.
Here's how you could use these two terms in a sentence:
“Wow. The typeface you chose really pulls this design together.”
“I’ll change the font size to 12pt so it fits in the box.”
The Anatomy of a Typeface
It’s way easier to communicate with designers when you actually speak their language, which is why it's important to understand the anatomy of a typeface.
Each part of a letter has its own special term, similar to bones in a human body. Below, you’ll see three diagrams that explain the makeup of individual letters, how these elements interact with each other, and how they sit on a line.
For example, let's take with the word "Faulty" as it's shown in the picture below.
Here's how each of the terms here are defined:
Baseline: The line where the letters sit.
Cap height: The distance from the baseline to the top of the capital letter.
X-height: Located in between the baseline and the cap height, it's the height of the body of the lowercase letter. (In this case, it's the letters ‘a,' ‘u,' and ‘y.')
Bowl: The curved part of the character that encloses the circular or curved parts of some letters, like 'd,' 'b,' 'o,' 'D,' and 'B.' (In this case, it's that round shape sticking off the letter ‘a.')
Serif: The slight projection finishing off a stroke of a letter in certain typefaces. (In this case, it's that little foot sticking off the letter ‘l.')
Descender: The longest point on a letter that falls beyond the baseline.
Kerning
Kerning is the modification of the space between two letters. For example, check out the image BATTLE:
Here, I used Franklin Gothic Medium to showcase the natural space you see between two letter T’s. It looks a little too snug, right? By customizing the spacing between just these two letters, you'll be able to increase readability.
Tracking
Similar to kerning, tracking deals with a modification to letter spacing. However, instead of adjusting the spacing between just two letters, tracking is an adjustment to the spacing between all letters an entire word. See the difference here:
For this example, I chose to make an extreme adjustment to the tracking. Typically, you’d want to apply tracking in small increments to avoid causing readability issues.
Leading
Remember in high school when you had to double-space your essays? Well, the terms “single-space” and “double-space” can also be called “leading,” which is the distance between the baselines. See leading in action:
Hierarchy
As you read through a blog post, you'll notice certain words stand out more than others. That's what designers would call creating a hierarchy. You can use different weights (bold, regular, light), styles (italic), and sizes to create a sense of order within your text. Not only does this help create a legible flow, but it helps the reader see what the most important points are.
Assignment #4 - YOUR NAME IN FONT
Using any software, you will write your name 8 different times using different fonts / sizes / colours.
Explain under each name:
1. Why did you choose that font?
2. What emotion or feeling are your trying to convey?
3. Why did you choose that colour?
4. Which design do you feel is the most effective?
Once you are done upload it to the classroom!
(name the file your name_logo)
Try your knowledge on these Type games
https://shape.method.ac | https://type.method.ac | http://typewar.com
Type Classifications
The two main type classifications you see are called serif and sans serif. Other classifications include slab serif, blackletter, script, modern, and decorative.
Serif
Remember when I pointed out the little foot in the word “Faulty?” Typefaces with feet like that are called serif. You can see where I highlighted these little feet:
Common serif typefaces include Times New Roman, Georgia, and Garamond. If you’re reading a novel, you might notice the body text is a serif. That’s because a serif is much easier to read in long, printed works due to the distinctiveness between letters.
Sans Serif
In French, the word “sans” means “without.” So the term “sans serif” literally means “without serif.” In the image below, you’ll notice the words lack serifs, as I pointed out with the red arrows.
Common sans serif typefaces include Arial, Verdana, and Futura. You’ll see a lot of sans serifs being used in blog posts and documents on the web because it feels more modern and looks great even at lower screen resolutions.
These websites have some great free modern fonts.
https://www.canva.com/learn/sans-serif-fonts/ | https://1stwebdesigner.com/best-modern-fonts/
Assignment #5 - Typography (ACTION)
Your Assignment - is to use 2 action words and create a typographic images that relates to the image.
Choose 2 action words and create a typographic images that relates to the image
For each word you must create 2 versions of it 1-Sketch, 1 Digital (in Photopshop).
Once you sketches have been approved take a picture (or scan using the photocopier) and put in your Google Drive
Open that image file in Photoshop and start tracing, filling and creating your logo!
Submit your final ".PSD" Photoshop file with labeled layers etc to Google Classroom under ASSIGNMENT #5 - TYPOGRAPHY ACTION
Include a picture of your original sketches also!!!
TIPS:
You also MUST sketch out the designs before using Photoshop digitally create it
Mr. Summerfield has to see and approve your two action words before you start in Photoshop
Follow along with the TRACING TEXT tutorial on tracing text using the pen tool
Ask for help from Mr. Summerfield!
Examples
Assignment #6 - Typography (HEADLINE)
Your Assignment - is to find a photo online from https://unsplash.com/ or (take a photo yourself) and create a headline text to describe or advertise it. You must also use a sub-headline or body text as well. Feel free to add any graphic details to help your poster design.
You will create this in Photoshop. You will need to upload both your .psd file and a .jpg file to Google Classroom.
Once completed, please UPLOAD IT TO GOOGLE Classroom under ASSIGNMENT #6 - TYPOGRAPHY HEADLINE
STAY INSPIRED!
TRENDS AND DESIGN PROCESS!