There are certain typographic rules that every designer should know. These include using proper font sizes, line heights, leading, kerning, tracking, and letter spacing.
In this article, we have put together all of the must-have terms for designers, to keep you sharp, alert, and
ahead of the pack.
What Is Typography?
The term “typography” refers to the art and craft of arranging type in a way that makes it readable and appealing. It is an essential part of any design process.
When designing a website or app, there are many things to consider: color, layout, images, navigation, copywriting, etc.
But when it comes to fonts, they can be one of the most important aspects of your design.
Fonts play a major role in how a user will perceive your brand. They are used to create visual hierarchy, convey meaning, and make the text more legible.
If you want users to understand what your site/app is about, then you need to use appropriate fonts.
Fonts can also help you stand out from competitors. A good example would be Apple’s new iOS 11 update.
Apple has used Helvetica Neue as its default font for their operating system.
This is not only because it looks great, but also because it stands out among other popular fonts like San Francisco, Gotham, and Roboto.
The Importance Of Typography
When it comes to web design, typography plays a huge role. Without it, websites wouldn’t look professional at all.
And if you’re looking to impress clients, you’ll need to pay attention to typography.
When choosing a font, you need to think about how it’s going to look on different devices.
For instance, you might want to choose a serif font for desktop computers, while sans-serif fonts are better suited for mobile phones.
You may also want to avoid too much contrast between the background and the foreground colors (e.g., white against black).
You should also consider whether your target audience prefers reading long paragraphs of text or short sentences with lots of details.
Longer lines tend to work better on smaller screens, so you should try to limit them to around 20 characters per line.
You should also take into account the size of the font. Fonts come in various sizes, including normal, small, medium, large, extra-large, and even gigantic.
You can use these to make sure that your font fits well within the space available.
Also, you should always test your designs on multiple browsers before launching them online.
Some browsers don’t support some features, such as drop shadows, gradients, and animations.
How To Choose A Good Typeface
Choosing a good typeface isn’t easy! There are hundreds of thousands of fonts available today. So how do you decide which ones to use?
First, you need to consider your branding. What kind of logo do you want to use? Will it be simple or complex? Do you want something clean and modern or vintage and retro?
Next, you need to find a balance between readability and aesthetics. Readability refers to how easily people can read your content.
Aesthetics means how attractive your design is.
If you have a limited budget, you can start by using Google fonts. These free fonts are usually very high quality and include everything you need to get started.
If you want to spend money, you can buy premium fonts. These are typically more expensive than Google fonts, but they offer a lot more options.
Choosing A Font
There are many factors to consider when choosing a font. Here are some tips:
- Type Size – The most important thing to remember is that bigger doesn’t necessarily mean better. In fact, there are certain cases where smaller fonts actually look better.
Remember to also consider the space between characters.
- Weight – Most fonts are either regular or bold. Regular fonts are easier to read, but bold fonts are often considered more eye-catching.
- Contrast – Make sure that the font you choose contrasts well with the rest of the page. If you use a light color for the body text, then you should use a darker one for headers.
- Color – It’s best to stick with two or three main colors. If you go overboard with colors, it will become difficult to read.
Choose a color scheme, with a strong, distinctive background color and stick to it.
- Spacing – This refers to the amount of whitespace or negative space between letters. Too little spacing makes it hard to read, but too much can cause the text to appear messy.
- Line length – Don’t let your lines get longer than 30 characters. Anything longer looks cluttered.
- Typographic elements – Include things like ligatures, kerning, and other typographical tricks. They help make your text more readable.
- Consistency – Use similar fonts throughout your website. For example, if you use Helvetica Neue Light on your home page, then you should probably use it everywhere else.
Top Typography Terms For Designers
- Arm – the arm of a font refers to any part of a letter that is not attached or connected to a vertical bar, such as the sides of a “V” or the top of a “T”.
- Apex – the typographic term “apex” refers to the highest peak, or top of a letter, character, or symbol, and refers to the place the two strokes or lines meet.
As an example, the top of the letter “A” is the apex.
- Aperture – The part of a letter where the curves begin to change direction.
In some cases, this may refer to the beginning of the curve, such as when describing the start of a curve.
- Baseline – The line along which most characters sit. Baselines are usually horizontal lines, but vertical baselines exist (for instance, in the lowercase ‘i’ and ‘j’).
- Baseline Shift – The distance between the baseline and the centerline of a glyph.
- Bearing – The angle formed by a pair of lines meeting at a point.
- Bold – When you create a bold variation of a font, you raise its weight. Bold fonts make important information stand out, and are used to emphasize words or phrases.
- Bowl – in typography, a bowl refers to the shape of an uppercase letter.
- Caps Lock – Caps lock is a function found on many keyboards, including Apple’s Macintosh keyboard.
It enables text to be capitalized by holding down the shift key and pressing the space bar.
- Cap Height – The vertical distance from the cap to the x-height.
- Centerline – The horizontal line that runs through the middle of a glyph. Centerlines can be either straight or curved.
- Centering – When you want to make sure something is centered within its container, you use centering techniques. Centering is also known as “justifying.”
- Character – Each individual letter in a typeface. Characters come in different sizes, shapes, weights, styles, widths, and colors.
- Character Set – A collection of all the available characters in a particular font.
For example, if you were working with Times New Roman, the character set would include the letters A–Z, numbers 0
- Charset – A collection of all possible characters for a given language. For example, the English alphabet has 26 letters, so the charset for English would have 26 elements.
- Descender – In some cases, a descender is a downward curve at the end of a lowercase letter. It may also be referred to as a tail.
- Hairline – the hairline refers to the thin lines between the strokes or parts of a character. It’s usually thinner than the stroke itself.
- Italic – An italicized font has been given an extra “x” stroke at the end of each letter. This gives it a different appearance from normal fonts.
- Leading – Leading is the space between text and the line above it. Leading can affect how your design looks.
- Ligature – A ligature is a combination of several letters that form one word. For example, the f in the word “fascinate” is made up of four separate letters.
- Line Height – The distance between lines of text. There are three main types: Normal, Condensed, and Expanded.
- Link -the Link is a small, curved stroke, which is usually used to connect the loop and bowl of a double-story letter. It may also be referred to as a terminal, or a neck.
- Monospace – A monospaced font uses fixed widths for all letters. This makes them ideal for coding because they’re easy to read.
- Serif – Serifs are small decorative strokes added to the ends of letters. They give fonts a bit of personality.
- Sans serif – Sans serif fonts don’t have any decorative features. They tend to be simpler looking, which makes them great for headlines.
- Slab serif – Slab serif fonts have thick serifs on the top and bottom of the letters. They’re commonly used for display purposes.
- Script – Script fonts are handwritten-looking fonts. They’re useful for creating titles and subtitles.
- Small caps – Small capitals are a special kind of font that resembles handwriting. They’re generally only used for headings and subheadings.
- Stroke – The outline of a character. Strokes are often used to create outlines, shadows, and other effects.
- Shoulder – The part of a lowercase letter where the descender begins.
- Slant – The angle between the baseline (the center of the letter) and the middle of the upper case letter.
- Stress – The amount of pressure placed on a letter as you type.
- Symbol – Symbols are little icons that represent something else.
- Text Decoration – Text decorations change the way text appears. You can use these to make text stand out, add emphasis, and even hide parts of a letter.
- Tightening – Tightening means making the spacing between letters smaller.
Typography Rules
The rules are simple: Use the right typeface for the job. Don’t overuse certain fonts, like Comic Sans, or underuse others, like Times New Roman.
And always keep typographic terms straight! Typography isn’t just about using fancy words; it’s about choosing the best typefaces for your projects.
Final Thoughts
Typography is an important element of any business and plays a key role in the relationship that brands have with their customers.
Any good designer needs a basic understanding of the terms and rules outlined above to ensure that the brand you are representing stands out for all the right reasons.
