Typography, the word itself, is a merger of two Greek words that means form and writing. Basically, it refers to the art (form) of organizing and arranging text (writing) in order to relate the sense of the text. Basically, it is how we see an information passed on through a medium—television, magazine, newspaper and even websites. Typography can refer to the art an artwork is shown to promote its purpose of informing, persuading and engaging viewers from all walks of life.
Typography is important in such a way that how you choose your designs to be viewed by others builds the character and tone of your artwork. To explain further, try to assess the variations in meaning in one statement with different font styles and sizes as shown in the image below.
Therefore, the prowess of your design is exemplified best on how you do your typography.
Since you get the picture already, here are some common terms that complete the concept of typography.
Aj Aviado is a marketing consultant for You The Designer. The absolute source of design news, tutorials and inspirational graphic designs. Check out You The Designer on Google+.
1. Lines
There are five horizontal lines that guide a composition of a line of characters. These are:
- a. Baseline – the line that the text sits on
- b. Cap height – marks the top of capital letters
- c. Ascender height – line that shows where the top of letters such as k and h touch. This is actually slightly higher than the capital line.
- d. X-height (midline) – shows the height of lowercase letters (except for t or l or p, and the like)
- e. Descender height (beardline) – portions of some characters that go below the baseline (p and y).
2. Leading
The distance of each line from the other affects the visual appeal of the text. In this case, leading refers to the amount of space from a line of text or another. Examine the examples below to see the importance of proper leading.
Example 1: Having a negative value for leading which causes the letters to almost overlap on each other from the first line to other greatly affects the intelligibility of your texts.
Example 2: The suggested value for leading is 120% of the type size.
Example 3: A 200% type size may not be ideal for your text since it consumes too much unnecessary space and further more the additional gray areas, slow down the pace when the text is read.
Remember to adjust your leading depending on the length of your statements. Slogans or taglines are usually paired with less leading since they contain very few words. Paragraphs, hence, are best seen and read the just the right kind of leading to prevent unintelligibility if the leading is less and reading latency if the leading is set too much.
3. Tracking
It is also known as letter spacing which typically has same effects of leading to your texts, only this time it is in between each groups of characters. Examine the image below.
The tracking that is set to negative is called tight while the one with any value beyond 0 is called loose. Usually a longer line of characters has more loose tracking but it still depends on how you bring other elements on your text such as background, font color, font face, etc.
4. Kerning
Oftentimes, there is confusion between tracking and kerning. If tracking refers to in-between groups of characters, kerning would be that miniscule space between the characters themselves. View the image below for reference.
Kerning is important to prevent distracting readers from any discrepancies created by uneven spacing in-between characters.
5. Alignment
Alignment is important to achieve good typography because it portrays how organized the content is and it basically dictates where you can place different objects that will complete the theme of your design. There are different types of alignment and you can view corresponding images for further reference.
a. Flush Left (Ragged Right)
It refers to the natural way we read text based on Western culture since text is aligned to the left. Make sure that the line length is in good balance—meaning, they are not too similar, but also not too far apart.
b. Flush Right (Ragged Left)
This type has the text aligned to the right. This is very seldom seen and if used, oftentimes it is to create a contrast to the main body of text to add some variation to it.
c. Justified
It is commonly used in narratives wherein the start and end of text lines are both aligned to the left and right. Uneven spacing may arise though as one of the issues in an effort to maintain the alignment. There also some instances that programs hyphenate words at the end of text lines to keep the text justified which may disrupt reading pace.
d. Centered
This type has the text drawn to the center instead of the edges. This is commonly used in poetry verses. Choose the text in which you will use this alignment carefully because quite long centered texts may cause difficulty in reading. It is preferred to use this on 2-3 lines of text. If you pull it off, your design can look classy and elegant. To do this, make sure that the text area can accommodate multiple logical lines of text and that there is enough contrast between the line length to make the text inviting.
The terms presented are just some of the important elements in your typography. To incorporate them into practical application, we need to use Photoshop and Illustrator. To begin with, familiarize yourself with the two panels in Photoshop and Illustrator that deals with typography. These panels are Character Panel and Paragraph Panel. You can refer to the image below for further identification.
Basic Tips to make a Good Typography
Now that you know where in your programs you can work with typography, here are some basic tips to make a good one.
1. Determine the hierarchy of your information.
Create a priority list for the objects present on your design. Afterwards, assign appropriate typographical settings on each object/text based on their hierarchy in that last. For instance, the title, of course, needs to use bold-faced fonts, center alignment and larger spacings. In contrast, footnotes may have the smallest font size and less spacing since they are just additional information.
2. Make your typography consistent with your theme.
No matter how good your design looks like, it will go unnoticed if you have a contrasting typography with your theme. Simply put, it is impossible to use pastel colors on Halloween-inspired themes.
3. Experiment first and familiarize yourself with typography.
It is not enough that you know the concept, it’s more important how you “re-create” the concept itself. It only means that without proper practice and application, it would be difficult for you to work on typographies which will take up much of your time and effort. Do not attempt to create a design with permanent typography without being prepared. Try to obtain inspiration from previous works, incorporate it with your artwork and re-create it on your own trademark.
4. Rely on your good taste.
Complying with the rules has always been the right thing to do. However if you wish your work to stand out, try bending a few rules here and there. Your work will not yield outstanding results if you stay too much on the safe side. Let your imagination explore so you could have more inspiration in letting your creativity empower your skills in typography.
5. Criticize accordingly.
Observe the typography of some artworks and websites and try to look for mistakes in typography that somehow most designers have overlooked. Do learn from their mistakes and try not to emulate those mistakes.
.jpg "Nice Calendar Icon (PSD)")
.jpg "Simple Steel Calendar Icon (PSD)")
.jpg "Calendar Mini (PSD)")
.jpg "Phoenix – Free Online Photo Editing Tool")
.jpg "Photoshop Express Editor – Free Online Photo Editing Tool")
.jpg "Pixlr – Free Online Photo Editing Tool")
.jpg "Sumo Paint – Free Online Photo Editing Tool")
.jpg "PicMonkey – Free Online Photo Editing Tool")
.jpg "Manage the lighting")
.jpg "Framing and composition")
.jpg "Try lots of angles and take lots of shots")
.jpg "Use the manual settings")
.jpg "Don’t get the same shots as everyone else")
