Typography presentation knowledge to remember
Typography presentation is an extremely important and necessary part for every designer. We can see text appearing everywhere, every billboard along the way, social networking sites, websites ... from offline to online all see the importance of the application presentation. letter arrangement. Enhancing the ability to present and arrange typeface helps us to increase the attractiveness, attractiveness, easy-to-remember, and easy-to-understand design of the design. Since then, our promotional purpose has also exceeded expectations. In terms of business sales will increase, but in terms of aesthetics, art for each designer will also increase sharply.
This article is for all audiences, all ages, all professions. Because the art of presentation, typesetting appears everywhere in our work and life.
First, let's take a look at some of the key terms in the world of typesetting. In this section, we need to clarify some commonly misused terms, and familiarize ourselves with character and numeric types. Also explain some terms in Typography that cannot be ignored.
In the world of typography design, novice designers need to know a lot of jargon. And among these terms, quite a few are confused and misused. This basic typography guide arranges explanations of terms from simple to complex that you need to know and master.
The first is to redefine basic misunderstood terms, such as the difference between typeface and font. Explain the difference between type of symbols and type of figures. Of course, we will also explain more about some of the necessary detailed typesetting with specific illustrations.
Typefaces and Fonts
One of the most common mistakes is the confusion between typeface and font. To explain the difference between them is to be relatively abstract. So we will talk about their different meanings first.
A typeface is a group of characters that share a common DNA (or in other words, share the most recognizable characteristics). For example, Alegreya Sans is a different typeface from Rockwell Std.
A font is a set of strokes in a typeface. For example, the 12 pt Franklin Gothic URW Light font is different from the 14 pt Franklin Gothic URW Light font. This is the difference in font size. We will use the same definition to talk about different font sizes. 12 pt Franklin Gothic URW Light is different from the 18 pt Franklin Gothic URW Book font.
In previous centuries, the text was individually placed by hand, and each letter was a small piece of cast metal. Each character is placed in wooden drawers divided into many compartments. A drawer of each specific type will have the full set of letters and inscriptions of the same size. Therefore, the term font has a specific meaning and is completely different from that of typeface.
These two words are often used interchangeably these days, but it is still important to distinguish between them. Because this is the beginning of the magic of typography.
It can be ilzustrated more easily, we imagine that there are many albums and songs, in which, the typeface is the different albums and the font is the songs in that album.
Font styles
The first type of lettering invented was designed like a Roman script. It was not until the early 16th century that italic fonts were introduced. It is of Italian origin and italics are a separate group, like serifs and sans serifs.
By the early 18th century, foundries began to combine Roman and italic designs, at which point italics were used to emphasize important points contained in the passage.
Italics or true italics are typefaces strongly influenced by the art of beautiful handwriting, in other words, calligraphy. Their slant mimics the mechanical movement of cursive writing. Italic typeface is specially designed for Roman fonts of similar appearance (except for a few other characters). Lowercase characters such as a, f, and g have a much altered appearance when designed as italic.
Oblique is less calligraphic than italic. There are no bold strokes in slanted fonts. Some characters are slightly italic while others maintain the neat style of their Roman characters. When using an oblique font in a paragraph, the slant does not stand out or contrast much from its previous Roman font.
We can see the obvious difference between italic and slanted fonts in the image below.
Thickness of the letter
From the late 19th century to the early 20th century, large typefaces appeared. In which Morris Fuller Benton is the creator and proponent of using large groups of letters. This is an idea of how characters in the same group will have outstanding common characteristics, differences between characters.
The most common fonts that we often see in a typeface are the lowercase font and the bold font. Some typefaces like Neue Haas Unica are extremely thick. This typeface includes a variety of thick and thin fonts. They are: extremely thin (untra light), thin (thin), thin (light), lowercase (regular), medium (medium), bold (bold), thick (heavy), fairly thick (black). and extremely thick (extra black). A thin to thick range of different typefaces like this gives a lot of advantages to this typeface. It is extremely useful when you use it to divide the main content in a professionally laid out page.
Font file types
A very common scenario is when we download and install a font, we wonder if we have chosen the correct file format. So you already know the difference between these font file formats. In this section, we will distinguish the differences between the file types of fonts.
PostScript files (including .pfb, .pfm, .lwfn, .ffil file extensions). This is a file developed by Adobe in the mid-80s of the last century. A computer will need two different types of files: one for display on the computer screen and the other for printing. The PostScript file type is not cross-platform. So Mac or Windows computers will need different files. It gets in the way when dealing with files on different operating systems. This file type is known to contain up to 220 strokes.
TrueType Font files (including files with the .ttf extension) were developed by Apple and Microsoft in the early 90's. This file type allows characters to be displayed in the most visible hint outline on devices with low resolution. However, combining this outline takes a lot of time and not all fonts take advantage of this benefit. A single file for both screen display and data printing has a maximum of 65,000 strokes.
The OpenType Font file (including files with the .otf extension) was developed by Adobe and Microsoft in the late 90s. These fonts are all supported by Unicode, so a single file can contain more than 65,000 strokes. Whereas before, typefaces from multiple languages needed a separate file, now this OpenType font can contain them all in a single file. Including slashes, alphanumeric styles, pictograms, etc. This file type is cross-platform, easy to handle whether you work on Mac or Windows.
Styles of numbers, signs and symbols
We can see that the digits in each typeface will also be designed differently. Each number type has a special use that makes design easier.
Lining and Old style numbers have different alignment lines. There are different widths for tabular and scale figures. And if used on multiple lines, the numbers may not align. Let's see the difference between the numeric types when we use them.
Lining Figures are usually the default numbers one can find in a typeface. The numbers in it are on the same alignment baseline as the rest of the characters. And these numbers next to capital letters are better because they have the same height.
Old Style Figures or non-lining are numbers that pull above or below the baseline. This style is great if you use it to write paragraphs of text. Visually, the height changes harmoniously between uppercase and lowercase letters.
Tabular Figures (tabular figures) are lightning-wide. Similar to monospaced fonts. This number style is great for planning the arrangement of numbered tables, charts or lists. Because they will align themselves vertically without us having to edit. Avoid using this numeric style for blocks of text because its width will make the digits look unsightly.
Proportional Figures (scale figures). Contrast with the tabular data above. Numbers with different shapes will have different thicknesses. Therefore, the numbers are not aligned vertically. We use this type of number for text content to make it easier for readers to understand.
Upper index and lower index
Superscript and subscript are numbers that are smaller than the full size because they have to be represented in special places such as numbers in fractions, exponents, etc. Or they can be used in footer and footer annotations, chemical symbols, etc. These numbers don't always fit in a typeface, but software like InDesign will have options to create a hypothetical number pattern. And these designed numbers have been aesthetically perfected, in harmony in thickness and proportion.
Superscripts or superior figures have been calibrated for the numerator positions of fractions or higher to fit mathematical formulas. Some typefaces may include the above or only one type.
Subscripts (Subscripts or inferior figures) are aligned to the baseline used for the denominator of the fraction or below the base used for chemical formulas.
Small capital letters
Small Caps are uppercase letters that are shorter than regular caps. Same height as lowercase letters or slightly taller. Thus creating a sense of visual harmony. If you want to highlight a line of text but don't want to use bold or italic, you can use this small-caps font style.
Unfortunately, many of today's small capital letters are computer generated. So be careful when using these small caps. Well-designed capital letters are finishes that are finished in both thickness and proportions of the letter, creating a harmonious, beautiful, and eye-catching feel. Avoid using the Small Caps button in InDesign, it is actually just capital letters scaled down. So the feeling is quite faint, the distance is too narrow.
Typography: standard and freestyle
We've seen these types of designs before but didn't realize it. The word Ligatures comes from the Latin word ligare, which means belt. Imagine having a string that would tie two or more letters together into a single letter for decorative effect. Let's analyze it in detail like this:
Standard ligatures can adjust the spacing between characters in a font by a certain ratio (kerning) when certain characters take up the horizontal space of the next character. For example, the letter f tends to take up space because the hook on the top of it leans to the right. This will be even more pronounced when using an italic font. Typical ligatures in English include combinations of letters such as fi, fl, ffi and ffl. Depending on the type of language, the font combinations will be different.
Discretionary or decorative ligatures do not focus too much on adjusting the distance between characters in a font according to any ratio, but must follow the style of a typeface. This typeface has a calligraphic appearance and can add distinct accents to each character. For example, letter combinations such as ct, sp and st have a predefined connection between characters. Illustrated as shown below.
Hyphens and dashes
Hyphens and dashes are punctuation marks that are often misunderstood and misused. Although the form is quite similar, the length is different, the purpose of use is different, and the specific function is separate. These three characters are horizontal strokes, depending on which typeface they are in, they have specific characteristics. In general, however, we can distinguish the following:
A hyphen is a short mark used to note letters or join newline characters. Hyphens are often used to separate numbers in phone numbers, join compound words such as long-term.
The en dash is longer than the hyphen and is about the same width as the letter N. Used in phrases of time, often replacing the words "to" (to) or "through" (via).
The em dash is the longest dash and its length is equivalent to the width of the letter M. Often used in place of commas, parentheses, or colons. Long dashes are also used to indicate a long pause in a sentence or a change of thought or emphasis. Many typewriter models do not have long dashes, but only hyphens. Therefore many people use two hyphens instead of long dashes. Note that this cannot be used and is not original in Typography.
Symbol &
One of the most beautiful characters of a typeface is the ampersand (& Ampersand). This symbol is a stylized depiction of "et", which in Latin means And. Designers often take the opportunity to design this & symbol as a way of expressing their own character and personality. We can replace the word and with the ampersand in cases such as: title, heading and brand. Or to concatenate words in a list. Use the & symbol sparingly or don't use it in copies as it will look unusually large.
Legal symbols (™ ® ©)
Trademarks, registrations and copyrights are important symbols commonly used when designing a brand identity. They help protect our work and prevent plagiarism. Usually these icons are often used in small sizes to create a sense of balance and modesty when they accompany the Logo.
Designers love to use serif symbols in serif fonts and sans serif style in logos. This symbol can be used without a foot in serif logos because it looks legible even at the size less.
If using ™ or ® in text size, set it to less than one x height. When the text is larger, the symbols are reduced in size to look more balanced. For the © symbol, set it to the height of the letter x or the height of the uppercase letters in the text.
Details about Typography
Clarity
Clarity is reflected in the detailed structure of a typeface as well as the distinctive characteristics that characters represent. It helps the reader to distinguish one letter from the next. There are many factors that contribute to a legible typeface. For example, basic height, character width, thickness, number, pins or not, stroke contrast, etc.
Easy to read
Readability refers to the balance and ease of reading words in a paragraph. Many designers have spent years mastering the art of typesetting, as it helps shape a page to be cohesive and balanced. Typesetting is detail-oriented and it is a combination of both clarity and readability. Depending on the unique characteristics of each typeface, designers will consider whether it is easy to read on a page. Font size, line and heading length, etc. are some of the factors that need to be considered to make text legible.
Font size
12 pt font is often used to create documents and documents. However, it is not the most legible font size for reading long forms of text. Many books, magazines and journals choose font 12 for printing. This is not only for aesthetics but it also increases printing costs even more.
Although each typeface at 12 pt will look different, let's try to print it out and read. Reducing the size to 10 pt will look more elegant. Also don't be shy if it's only 0.25 pt or 0.5 pt because it can make a big difference. These are all things to watch out for.
Depending on what product we are designing, adjust accordingly. For example, business cards often use the word 7 or 8 pt.
Line length
On each design there are many columns of text, or in other words, text boxes. Each line of the cell or frame containing this text will contain how many characters, it is the unit of measurement of the length of the line (Line Length). As in the illustration below we see that the first column of small text has 30 characters per line.
Depending on the font size of the text in the column, the line length will be different. The optimal line length is between 45 - 75 characters. If we increase the font size, we also need to increase the line length.
Narrow lines are suitable for short texts, so that the viewer's eyes do not have to move too far to read the next part.
For long documents, we need to choose to set up wider columns, so that the reader does not need to look down the line as often. Layout for design is also easier.
Spacing between lines
Leading is an important design aspect that determines the readability of text. In other words Leading is the vertical distance between each line of text and is measured from baseline to baseline.
For content with multiple lines of text, increasing the line spacing will ensure adequate space between lines. Make it easy for viewers to read, read quickly and memorize more easily in the brain.
Depending on the type of font we are using to decide whether to increase or decrease the spacing between lines. Bold typefaces need more space between lines. Because this typeface makes the page darker and needs to be spaced to make the design easier to see, more beautiful. One trick we have is to add 2 pt to the final size of the text.
Pay attention to the text that is above the baseline (ascenders), it is in letters like h, l, k,... and the text that is below the baseline has (descender) in letters like p, g, y, q,... as they will probably touch the upper or lower lines.
Letter spacing
Tracking is also known as the spacing between letters. The operation to increase or decrease the letter spacing is to add or reduce the width space between characters.
Lowercase characters that require more spacing, such as rags, orphans, and windows fonts.
Between strings of uppercase letters also need to increase the space between characters.
Although there is no rule for this Text Spacing, you can use your own eyes to choose the appropriate alignment distance.
Stretch letters
Unlike the word spacing (tracking) increases or decreases the space between characters in a word. Kerning is the combined distance between two characters. In other words Kering is also adjusting the spacing but is the space between two letters. Placed too close together the words cannot be read. But putting them too far apart is like writing each letter by touch i discrete. Make the reader not understand the content to be conveyed.
Most typefaces have built-in stretchy typefaces carefully designed by the designer. However, there are many text combinations, some of which are inelastic by default, and will not look good.
So there is no mathematical rule for this word scaling, only the only tool is your eyes.
The goal of letter scaling is to create equal spacing between pairs of letters so that full words look evenly spaced.
Scribbled characters are difficult to scale because of the space the strokes take up and can overlap when several crossed stroked letters are combined.
Text Alignment
Typographic Alignment refers to the position of text on a page. And it is one of the first things that one has to decide when starting a design. Different font alignment will apply to different situations. Each type has its own difficulty that we need to solve in order to maximize the readability of our text.
There are 4 types of font alignment, including:
Flush Left: If we need to sort a large amount of text, we can move them to the left. This is a great choice because languages are read from left to right. Use hyphens to smooth your paragraphs.
Center Align: We use center alignment for less text. Examples are headlines, formal invitations, and intros. Avoid using this style for long documents as it will make the text on the design difficult to read because of uneven edges.
Flush Right: This type of font alignment is often applied to languages that read from right to left. For example Hebrew and Persian. We can use this style for a few lines and when needed like quotes, notes, sidebars...
Justified Text is aligned on both sides simultaneously. This style is very commonly used in books. Helps save space, can concatenate the most characters on a line. We need to use hyphens for this typeface to avoid wide spaces between words.
Conclude
In this article, we have been introduced and clearly analyzed the differences between important design terms in the art of typography.
The important thing we need to do is learn the do's and don'ts of typography. We'll see why some typefaces can be used in small frames or why text is easier to read in a wide column. Although this tutorial shows many rules, rules are made to be broken. So don't be afraid to be creative and experiment. Once we master the knowledge, practice and apply these basics. You are completely free to explore new horizons of typography.