TYPO GRAPHY CHAPTER #3
CONTENTS 1 // WHAT IS IT? 2 // FONTS AND TYPEFACES 3 // TYPE CLASSIFICATION 4 // ANATOMY OF A TYPEFACE 5 // PRINCIPLES OF TYPOGRAPHY 6 // WHAT FONT TO USE? 7 // RESOURCES 8 // HOMEWORK
WARNING! This lesson might seem too much for you at first but I promise, everything in here is useful. If you can’t read it all right now, you can come back to it when you need the info. I did my best to gather only the most important things to know about typography, a quite complicated subject.
?
WHAT IS
IT
Typography is how text looks. This is the cumulative result of many small decisions—like the font in use, the font size, the line length (for example, the width of a paragraph), and the line spacing. It’s the result of more subtle things too, like the style of characters chosen (some fonts offer many different versions of the same character), and the presence and arrangement of punctuation. Typography encompasses every element in a composition, from paragraphs to headings, lists, navigation, forms, and more, as well as the spaces between and around those elements.
Text blocks are chunks of text that share a set of typographic
rules, such as paragraphs in an article, lists, or image captions. The fundamental aspects of a text block are typeface, font size, line length (often called measure) and line height. When any one of these aspects changes, the others are affected. No particular arrangement is correct, but some look better than others.
Part of practicing typography is having the patience to experiment with these arrangements. Typesetting a successful text block is a matter of balance and judgment.
& FONTS
TYPEFACES Fonts The term ‘Font’ was originally used to identify the design elements in a typeface e.g. bold, underlined, or italic. Bold type can add an emphasis or strength to a font. Underlined type is an effective way of emphasizing the title of a document. It can also be used to call attention to an important section of text. Italic type can also emphasise an important word or passage of text, but it tends to be used in a more informal context. Italic fonts have an animated style and are often selected for designs where there is a need to convey the illusion of speed and energy.
Typefaces The term ‘Typeface’ was originally used to identify a family of fonts. ‘Roboto’ is a typeface.
The fonts in this sentence are all members of the ‘Roboto’ family. Their height is measured in points - the standard unit for printed text. There are about 72 points to one inch. Although the above fonts are all the same height, note how their breadth varies according to their style. Some fonts are more suited to fitting into a confined area of a design, while others like to spread themselves out.
TYPE
CLASSIFICATION Serif Serif typefaces are called “serifs� in reference to the small lines that are attached to the main strokes of characters within the face. Serif typefaces are most often used for body copy in print documents, as well as for both body text and headlines online. The readability of serifs online has been debated, and some designers prefer not to use serifs for large blocks of copy. This paragraph was written with Georgia, a serif font.
Within the serif classification, there are many sub-types. Old Style serifs (also called humanist) are the oldest typefaces in this classification, dating back to the mid 1400s. The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones). This paragraph was written with Centaur, an Old style serif. Transitional serifs date back to the mid 1700s, and are generally the most common serif typefaces. The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs.
This paragraph was written with Times New Roman, a Transitional serif.
Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced contrast between thin and thick lines, and have have a vertical stress and minimal brackets. They date back to the late 1700s. This paragraph was written with Bodoni, a Modern Serif. The final main type of serif typeface is the slab serif. Slab serifs have little to no contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.
Sans Serif Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. The first sans-serifs were created in the late 18th century. There are four basic classifications of sans-serif typefaces: Grotesque, Neogrotesque, Humanist, and Geometric. Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk. These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs.
Archivo is a Grotesque font. Neo-grotesque typefaces include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesques. They have a relatively plain appearance when compared to the grotesques. This is Arial. Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande. These are more calligraphic than other sans-serif typefaces, and are also the most legible (hence the popularity of some of them for website body copy). They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths. This is Verdana. Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail. They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule. This is Futura.
Script They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy.
Display Display typefaces are probably the broadest category and include the most variation. The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or other short copy that needs attention drawn to it. Display typefaces can be formal, or informal, and evoke any kind of mood. They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts. This paragraph uses Cup and Talon, a display font.
Proportional vs. Monospaced In proportional typefaces, the space a character takes up is dependent on the natural width of that character. An “i” takes up less space than an “m”, for example.
Times New Roman is a proportional typeface. In monospace typefaces, on the other hand, each character takes up the same amount of space. Narrower characters simply get a bit more spacing around them to make up for the difference in width.
Courier New is one example of a monospace typeface.
Mood The mood of a typeface is an important part of how it should be used. Different typefaces have strikingly different moods. Commonly used moods include formal vs. informal, modern vs classic/traditional, and light vs dramatic.
Weights & Styles Within the majority of typefaces, you’ll find more than one style and/or weight. Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters.
OF
ANATOMY A TYPEFACE
The different letterforms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface:
Arm/leg – An upper or lower (horizontal or diagonal) stroke that is attached on one end and free on the other. Ascender – The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height. Bar – The horizontal stroke in characters such as A, H, R, e, and f. Bowl – A curved stroke which creates an enclosed space within a character (the space is then called a counter).
Cap Height – The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.). Counter – The partially or fully enclosed space within a character. Descender – The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline. Ear – The small stroke that projects from the top of the lowercase g. Link – The stroke that connects the top and bottom part (bowl and loop) of a two–story lowercase g. Loop – The lower portion of the lowercase g. Serif – The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles. Shoulder – The curved stroke of the h, m, n. Spine – The main curved stroke of the S. Spur – A small projection off a main stroke found on many capital Gs. Stem – A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals). Stress – The direction of thickening in a curved stroke. Stroke – A straight or curved line. Swash – A fancy flourish replacing a terminal or serif. Tail – The descender of a Q or short diagonal stroke of an R. Terminal – The end of a stroke not terminated with a serif. X-height – The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.
Glyphs The word essentially refers to all the available characters in a font, from letters to numbers and all the special characters.
Kerning and Tracking Kerning is the adjustment of the spacing between individual characters. Tracking, however, is the spacing of a group of characters. These two are often confused, but the way I remember them is that Tracking sounds like a long line of railway tracks, whereas Kerning sounds like kernel, which is an individual object.
Alignment Generally text should be left aligned, simply because we are used to reading that way. Without good reason, only consider centering or right aligning text if it is a small amount, such as a heading or caption. Also, justifying text (where it has a straight edge on both sides) should be used in moderation too. Additionally justifying in a small column size can cause irregular spacing as between words as the software attempts to adjust your text to fit.
Measure This refers to the length of lines of text in a paragraph or column. Most people tend to just refer to it as column width though. Measure is an important thing to get right in typography as it can be crucial to the readability of the text. If the measure is too wide the text may be difficult to read as the eye has to move a lot more after each line is read. If it is too narrow it can also be tiring on the eye to read, as the eye is constantly moving back and forth. A narrow measure will also lead to a lot of hyphenation.
Hyphenation Another one of those details you have to judge in typography. Hyphenation is not loved by designers or typographers but is considered necessary sometimes in order to prevent rag problems
Widows and Orphans If a single word or very short line is left at the end of a column it is called a Widow. Likewise if the same is left at the top of the following column this is called an Orphan. Both of these are considered bad typography as they cause distracting shapes in a block of type.
PRINCIPLES
OF
TYPOGRAPHY
Don’t use too many typefaces It’s good to use diverse fonts but most of the times 4 of them are more than enough. Otherwise, you might confuse the reader and lower the visiblity of text. This document was created for learning purposes and represents and exception from the rule.
Contrast is good, but the wrong colors can be painful Despite the fact that people love colors, sometimes color makes text harder to read, less enjoyable and can ever cause pain when looked at for a longer time. It is almost always a bad idea to choose a text color and a background color which contrast with one another in a discordant manner. You need to have enough contrast between the background and the text in order for the text to be legible, but you also need to make sure the colors don’t clash.
Scannable text is a must When writing for the web, readability is not the only thing you have to worry about. The user is free to surf away at any moment and with just one click. Your purpose is to make sure that the text is in such good shape that the reader will keep his interest long enough to read through the whole thing. That won’t happen unless he can easily scan it for focus points that peak his interest.
Don’t distort typefaces Sometimes you feel the need to stretch of pull text to make it fit in a certain space or make it look different. Don’t do it! Their creators have put a lot of work into making them, they are very carefully designed. Do not use the bold and italic buttons in character palettes of the software as they are called “false bold/italic”.
T WHAT FON ? TO USE Create a Mood Know what’s out there Test, test and test again Use Caution When Using Unusual Typefaces Combine Typefaces Effectively Choose a Typeface That Has the Characters You Need Make it readable There Are No Rules. You are free!
RESOURCES Learn more http://webdesign.tutsplus.com/series/a-z-of-web-typography--webdesign-11706 https://creativemarket.com/blog/2014/08/25/10-typography-terms-every-designer-should-know http://www.designyourway.net/blog/resources/10-educational-videos-to-introduce-you-to-typography/ http://www.creativebloq.com/typography/type-videos-typography-tutorials-1012992 http://practice.typekit.com/lesson/selecting-typefaces-for-body-text/ http://www.fonts.com/content/learning/fyti http://www.linotype.com/7/fontlounge.html http://ilovetypography.com/ http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ http://typedia.com/learn/only/anatomy-of-a-typeface/
Inspiration http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-design/ http://www.webdesign.org/100-lovely-typography-designs-to-inspire-you.22257.html http://www.fromupnorth.com/best-typography-of-2013/ http://speckyboy.com/2009/05/05/42-amazing-resources-for-inspirational-typography/ http://www.davidairey.com/typography-flickr-groups/ http://www.queness.com/post/227/20-websites-with-beautiful-typography http://www.usetypography.com/
Font websites http://www.fontsquirrel.com/ http://www.google.com/fonts http://www.fonts.com/ http://www.dafont.com/ http://fontfabric.com/ http://www.1001fonts.com/ http://www.losttype.com/font/?name=cylburn http://www.fontspace.com/
18 Font Games <3 - MUST PLAY! http://mashable.com/2013/11/21/font-games/
HOMEWORK TASK 1: HOW MANY FONTS ARE IN THIS DOCUMENT? TASK 2: PLAY THE GAMES TO PRACTICE WHAT YOUâ&#x20AC;&#x2122;VE LEARNED TASK 3: ANGEL LETTER Compose and design a letter for your angel letting him/her know how these last months as a bestie worked for you and how they can help you in the future. The letter can also contain Holiday wishes(it can be Christmasy). Requirements: use at least 3 fonts (motivate your choice in detail and mention the font types serif, sans-serif, monospaced, traditional, modern etc) create a color palette to match the letter style (motivate your choice - as you did in the previous homework - X(my angel)) likes green and yellow, happy colors) create a page template with design elements (lines, borders, squares, circles or any other shapes including dogs, butterflies, snowflake, trees or whatever you like, patterns or textures) the letter can be a one-pager (A5, A4, letter, circular etc), landscape or portrait or it can contain 2 pages, both front and back you can create it in Adobe Illustrator or Adobe Indesign it can be eigther cute and fluffy or elegant and serious
IF YOU NEED ANY HELP DONâ&#x20AC;&#x2122;T HESITATE TO ASK ME.