Everything You Need to Know About Fonts – “Verba volant, scripta manent”, is a Latin proverb that means spoken words easily forgotten but written words remain. This proverb highlights the important role of written text as a means of communication. 

The earliest known attempt to record stories and ideas was a cave full of drawings which was first discovered around 25.000 BC.

Later, the drawings became known as pictographs; a simple representation of people, places, and objects, which were relatively easy to learn and understand. This written communication remains longer than spoken, regardless of their simplest forms.

 

 

About 5000 years ago, people started creating the first signs and letters and became the most significant communication tool ever since. The tool had developed enough from year to year when rapid development of science and technology changed to digital forms.

Typography is actually one of the most essential elements of graphic design. In a broader sense, typography covers page layout and pattern, or each printing material.

Whereas, in the narrow sense, it is responsible only for selection, arrangement and anything related to the letter arrangements, except illustrations and elements apart from letters, on the printed page.

Nevertheless, what and how exactly are typography principles?

It is not that important for most people but if you are interested or about to join the design industry, you need to master this knowledge.

 

 

Everything You Need to Know About Fonts

 

5 Typography Principles We Must Know

There are 5 basic principles in typography we should follow, they are:

Apply Less Fonts

Most designers assume that using several fonts at once improves the design.

In fact, having many fonts would only confuse the readers, particularly with more than 3 types. They might give an impressive look, yet the audiences’ readability is being compromised.

Thus, using only one font for one design makes the text more readable, helping the message being conveyed. Another available option is applying one font family with different thickness options as needed.    

Left Alignment 

While many people prefer the unique look given by the center alignment, this just doesn’t comply with the typography principle which left alignment is suggested.

This is because we mostly read from left to right. Using left alignment gives a tidier look and organizes the texts well. The audiences will have better experience in reading the text without any misunderstanding.     

Contrast between Texts

Next to consider is the contrast between texts; selecting the text size based on our needs. Not only does it work for the font, but the text size also needs to be adjusted.

It would be best to use the 2x principle, meaning the headline size is 2x bigger than the body text. If the body text is a font size of 12, then the headline should be the size of 24.

However, this typography principle about size is subject to change necessarily, especially when some headlines present in design.

X-height theory

When would we need to use X-height? If you want to use 2 different font types but aren’t sure which combination would work.

In short, you just have to compare the X-heights of the two font types. If both typefaces have similar X-heights, they would create a harmonious sequence .

Type the letter X (uppercase font) side by side for each font to compare and see their difference easily.

Don’ts 

Apart from those 4 points, there is one left you should not do; combining 2 font scripts or 2 serif fonts (except belong to the same family) because those typescripts have strong typography characters.

Their combination will make the audiences hardly read the text and the message fails to be understood. Always take your time to pair some typescripts, preventing similar mistakes.

 

Font Usage in the Modern Era

Here are some examples of using fonts in today’s world:

Website design

They were carefully selected to create both aesthetic and readable websites.

Logo design

The selected font for the company logo should have a strong impression and at the same time, help reminding people about the brand.

Brochure

Its usually attract people’s attention and deliver the message.

Name card

It has a professional impression font yet attractive for those who receive it.

Advertisement

The chosen font were meant to grab people’s attention and convey the message in a more effective way.

Banner design

Its font is intended to get people’s attention and effectively deliver the message.

Poster design

It has a way to attract people and relay the message well.

Wedding invitation

Font selection plays a big role in conveying the right emotion and setting expectations when designing wedding invitations.

 

The Difference Between Digital and Manual Typography

Digital typography is a process of using computer software to create and present text. The process also includes font selection, font size and leading arrangements, as well as creating paragraphs. It is usually done with design software such as Adobe InDesign or Photoshop.

On the other side, manual typography is a process of creating and presenting text using physical tools such as pencils, pens and papers. It includes writing beautifully hand-written, typing on typewriter, or printing text on printer. This process is much preferred by book artists or graphic designers, creating more personal and special works. 

 

Typography Terms

In this article, you will read more typography terms and their definitions.

• Font: in traditional typography, particularly on metal print, font is a set of metal characters representing the complete character set of a particular design (all characters, numbers, signs, symbols, etc). But today, font refers to the complete character set of a particular design or letters in digital forms.
• Typography: typography is a term in graphic design which requires other fields to comply. In short, typography is a specific letter design like Times New Roman.
• Character: Individual symbol from the complete character set that creates typography, it could be letters, numbers, punctuations, etc.
• Glyph: non-standard variation (sometimes decorative) of an existing character for more available options on file font.

• Serif: Short line or stroke that sticks or extends across the open end of a letter
• Sans Serif / Sans: literally means “without line”
• Italic : letter types that slant upward (from left to right)
• Baseline: Imaginer line used for border with other letters or characters
• Cap Line: Imaginer line that marks the upper height of uppercase letters and several lowercase too (ascender)
• X-height : lowercase heights usually based on the letter x, excluding ascenders and descenders.
• Tracking / Letter-Spacing : consistent number of the spaces between characters in a complete text.
• Kerning: Horizontal spaces from two characters consecutively, adjusting the kernings create a neat look.

• Leading / Line-Spacing: vertical space from the text stripes (from back line to another)
• Stroke: Straight or curve lines
• Stem: Vertical or diagonal straight line
• Arc of Stem: Continuing curve stroke with stem
• Foot: part of a stem that parallel on the baseline
• Descender: Part of characters (g, j, p, q, y, j) that decrease below the baseline
• Ascender: Part of lowercase characters (b, d f, h, k, l, t) that extends above the lowercase x-height letter.
• Joint: the dot where strokes connect with stems
• Apex: the uppermost connecting dot of a letterform where two strokes meet. They might be round, sharp/oval, flat/blunt, etc.
• Vertex: the dot under the character where two strokes meet
• Crotch: the angle where two strokes meet
• Arm: upper horizontal or diagonal line that is attached in one end and attached-free on the other
• Feet: short and lower stroke in a letter form
• Shoulder: curve lines in letter h, m or n
• Bar / Crossbar: horizontal lines in characters such as A, H, R, e or f
• Cross Stroke: the cutting line that across the letter stem
• Bowl: Curved stroke creating closed room in a character (known as counter)
• Counter: the space in character that is partially or completely closed. Bounded by a curve, stroke or stem.
• Aperture: an open or partially closed space of negative room created by open counter
• Double- Story: lettertypes with two counters
• Terminal: a stroke which doesn’t end with serif
• Swash: decorative ornaments replacing terminal or serif
• Ligature: connecting two or more letters to create one character, particularly a decorative one.

 

OTF vs TTF

These two terms must be familiar for people within the typography industry yet quite confusing for the beginners. Read to discover the difference between them.

OpenType Font (OTF)

OpenType Font (OTF) font format was developed by Microsoft which was originally expanded from TrueType. It was a joint effort between Adobe and Microsoft, including the integration process to various applications.

OTF eventually has more features than TTF. It has the ability to save up to 65.000 characters at once and many font types (regular, bold, italic, etc) in one file. This huge capacity makes OTF more flexible to use in design.

TrueType Font (TTF) 

TrueType Font is a standard font format developed by Apple in the late 1980s, to compete with Type 1 font from Adobe. TTF is one of the most common formats found on computer operating systems such as Mac OS and Windows.

 

4 Basic Font Styles

Along with typography, there is another term called font which has numerous types. Different font types, different functions. According to Wikipedia, font is a typeface with specific size, weight and style. While computer font refers to electronic data with a set of icons, characters or symbols.

We mostly use four basic typeface; serif, sans serif, script, and display.

Serif Typeface

Hooked serif/letter is a typeface with hook at the end of the strokes. This typeface is also known as “Roman”. Serif typeface suits well on articles and news writing. Among other available typeface, serif is considered as the most formal font. Such as: Stainger, Safira March, and Castre.

 

Sans Serif Typeface

In contrast to the Serif typeface, Sans serif is a typeface without a hook at the stroke’s end. It is often called “Gothic”. It is widely used in digital usage and computer display, because it improves the readability compared to Serif. This typeface tends to represent modesty, purity, efficiency and modernity. For example: Brown Sunflower, Vilane, and Rivage.

 

Script Tyeface

Script typeface is based on variative strokes which are made by handwriting. This typeface, sometimes, made by brush and portrays something elegant, natural and personal. This typeface is generally used in short texts, other than long text such as paragraphs, and should join both uppercase and lowercase letters. Contoh: Breathing, Feeling Passionate, and Gellatio.

 

Displays Typeface

Display is also called a decorative typeface. It first appeared around the-19th century and significantly expanded, thanks to the affordable technology of font creation. Display typeface is created in large size and polished by beautiful ornaments. For example: Blimps, Global Bikers, and Blueberry.

Apart from those mentioned above, there are also fonts with certain themes, such as Esports, Retro, Vintage, Sci-Fi, Graffiti, Blackletter, and Racing.

 

Fonts Download Sites for Free and Legal

If you want to have more font collections on your computer or smartphone devices, you can visit free download sites without purchasing or subscribing to them. There are numerous available fonts you can choose for your design styles needs.

Additionally, you can easily search and download its freely from many reliable sources. Make sure to visit only safe sites for downloading free fonts.

Here is the list of the websites you can visit to download font freely yet legally.

Dafont

First on the list is Dafont, the most well-known site for free font. It allows you to select and download many font types based on the themes, authors, popularity, or alphabetical as you need. 

Google Fonts

Google font is the Google Library with more than 1000 licensed web fonts. It is one of Google’s efforts to create accessible and open-source design fonts for use on the internet. 

1001 Free Fonts

The next downloading site is called 1001 Free Fonts. It has a wide variety of font types you can explore based on themes, styles, designers, and best fonts they offer. You can check the font on the “Preview” menu, which helps you to choose any fonts you need.

Font Space

As the name suggests, this site has a space-themed display. You can choose and download 86.000+ available fonts here. This site also provides a “preview” tool to review if the font you need has been found. It is also possible to download fonts without having an account.

1001 Fonts

Another site that allows you to download fonts is 1001 fonts. It offers 30.000+ free font in 17.000+ families. It has a large number of font categories which allows you to sort them through decades. Even several fonts are free for commercial use. You can discuss anything related to fonts on the “Forum” feature.   

Clickfreefonts

Try visiting Clickfreefonts if the other sites don’t meet your expectations. It allows you to download various free fonts you can choose from many categories. Its modest display helps you to download easily. You can also see the font quality from the ratings given by other users.

 

Before downloading the free font, make sure to understand the licenses given by designers. Here are the explanations:

• 100% Free : allows you to use a font both for personal and commercial uses.
• Free personal use : for non-profit use only.
• Demo : let you try the fonts, yet prohibited from personal and commercial uses.

 

Generally, font is used to display text both on screen or printed media. There are numerous font types available, and choosing the right font would improve the aesthetics and effectiveness of visual communication.

While the font also represents styles and characters, it is important to consider your purposes and  messages you want to deliver when choosing the font.

In summary, font are an essential element in visual design, and having a good understanding on choosing the right font would help you build an effective visual communication.