TyPedia Typography 2015 Natahlia Lee 1242760 Anatomy of a Typeface Font/Typeface Italics Definition: “A font is a set of printable or displayable text characters in a specific Definition: “While roman typefaces are upright, italic typefaces slant to the right. style and size. The type design for a set of fonts is the typeface, and variations But rather than being just a slanted or tilted version of the roman face, a true or of this design form the typeface family . Thus, Helvetica is a typeface family, pure italic font is drawn from scratch and has unique features not found in the Helvetica italic is a typeface, and Helvetica italic 10-point is a font. In practice, roman face.” (Typography Deconstructed, 2010). font and typeface are often used without much precision, sometimes interchangably.” (Rouse, 2005). Example of Italics Example of Font/Typeface Italics Italics Helvetica Times new roman italics Font helvetica italic HelveticaTypeface helvetica italic 10-point Special Characters Small Caps Definition: “Special characters are any characters that are not on a standard Definition: “Small caps are short capital letters designed to blend with lowercase keyboard. They can also sometimes be know as a glyph. Special characters are text. They’re usually slightly taller than lowercase letters.” (Butterick) those that fall outside the basic alphabet of your language and can include symbols, less common punctuation, foreign characters and almost any other Example of Small Caps letterform you can imagine.” (Cousins, 2014) Example of Special Characters SMALL CAPS SMALL caps Example of the use of all Example of blending letters being small caps small caps with lower © case letters Copyright symbol ™Trade mark sign Anatomy of a Typeface Upper Case Kerning Definition: Upper case refers to capital letters. Definition: “Kerning is the adjustment of specific pairs of letters to improve spacing and fit. (It’s distinct from letterspacing, which affects all pairs.) Most Example of Upper Case fonts come with hundreds and sometimes thousands of kerning pairs inserted by the font designer.”(Butterick) UPPER CASE Example of Kerning All capital letters AY AY Lower Case Kerning off Kerning on Definition: Lower case are smaller letters in comparison to capital letters. Example of Lower Case Point Size lower case All small letters Definition: Point size is the size of the font. It is measured by the distance from the highest ascender to the bottom of a descender. Leading Example of Point Size Definition: Leading varies the vertical spacing of a paragraph. Leading is measured from the baseline of one line to the baseline of the row above. Point Size Point Size 36 pt 30 pt Example of Leading Leading Leading Leading Leading Leading off Leading on Anatomy of a Typeface Baseline x-height Body Width Ascender Type sits on a baseline. Based on the height of the Invisible boundary around Parts of the letters that letter. the shape of the letter. rise above the x-height. Body Width Ascender x-height X Baseline X X Descender Serif Bowl Stem & Arm Parts of the letters that little feet or extensions All the rounded letters The tall vertical stroke is the extend below the baseline. that are the finishing have bowls. The rounded stem. strokes that extend from stroke of the letter forms. part is called a bowl. the stem are called arms. Serif Bowl Arm Stem Descender Spine Crossbar Cross stroke Ligature The spine has a curve in it. A ligiture is the connection Crossbar is a horizontal Cross stroke crosses over between a specific pair of stroke in the middle of a a stem. letters or in some cases three. letter. Cross stroke Spine Crossbar Anatomy of a Typeface Alignment Example of Alignment Justified Definition: “Justified text combines left and right aligned text. When a block of Abc def ghi jkl Abc def ghi jkl Abc def ghi jkl Abc def ghi jkl text is justified, each line fills the entire space from left to right, except for the mno pqrs tuv wx mno pqrs tuv mno pqrs tuv mno pqrs tuv paragraph indent and the last line of a paragraph.” (Christensson, 2011) yz wx yz wx yz wx yz Justified Centered Flush Left Flush Right Centered Definition: “Centered text is placed in the center of each line. As you type, the text expands equally to the left and right, leaving the same margin on both sides. Serif, Sans Serif When you start a new line, the cursor stays in the center, which is where the next line begins.” (Christensson, 2011) Definition: “Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. Sans serif does not have these details or flourishes.” (Macon, 2013) Flush Left Definition: “Left aligned text begins each line along the left margin of the Serif Sans Serif document. As you type, the first word that does not fit on a line is placed at the left margin on the next line. This results in a straight margin on the left and a "ragged edge" margin on the right.” (Christensson, 2011) Superfamilies Flush Right Definition: “aligns the beginning of each line of text along the right margin of the Definition: “A superfamily consists of dozens of related fonts in multiple document. As you type, the text expands to the left of the cursor. If you type weights and/or widths, often with both sans-serif and serif versions. Small more than one line, the next line will begin along the right margin. The result is capitals and non-lining numerals (once found only in serif fonts) are included in a straight margin on the right and a "ragged edge" margin on the left.” the sans-serif versions of Thesis, Scala Pro, and many other contemporary (Christensson) superfamilies.” Classification CLARENDON “A basic system for classifying typefaces was devised in the nineteenth century, Egyptian or Slab Serif when printers sought to identify a heritage for their own craft analogous to that of art history. Humanist letterforms are closely connected to calligraphy and the “Numerous bold and decorative typefaces were introduced movement of the hand. Transitional and modern typefaces are more abstract in the nineteenth century for use in advertising. Egyptian and less organic. ” (Lupton, 2009). typefaces have heavy, slablike serifs” (Lupton, 2009). Humanist or Old Style Humanist Sans Serif “The roman typefaces of the fifteenth and sixteenth SABON “Sans-serif typefaces became common in the twentieth centuries emulated classical calligraphy. Sabon was century. Gills Sans, designed by Eric Gill in 1928, has designed by Jan Tschichold in 1966, based on the humaist characteristics. Note the small, lilting counter in sixteenth-century typefaces of Claude Garamond” (Lupton, the letter a, and the calligraphic variations in line weight.” 2009). (Lupton, 2009). Transitional Transitional Sans Serif HELVETICA BASKERVILLE “These typefaces have sharper serifs and a more vertical “Helvetica, designed by Max Miedinger in 1957, is one of the axis than humanist letters. When the typefaces of John world’s most widely used typefaces. Its uniform, upright Baskerville were introduced in the mid-eighteenth century, character makes it similar to trasitional serif letters. These their sharp forms and high contrast were considered fonts are also referred to as “anonymous sans serif.”” shocking.” (Lupton, 2009). (Lupton, 2009). Modern Geometric Sans Serif FUTURA “The typefaces designed by Giambattista Bodoni in the late BODONI “Some sans-serif types are built around geometric forms. In eighteenth and early nineteenth centuries are radically Futura, designed by Paul Renner in 1927, the Os are perfect abstract. Note the thin, straight serifs; vertical axis; and circles, and the peaks of the A and M are sharp triangles.” sharp contrast from thick to thin strokes.” (Lupton, 2009). (Lupton, 2009). Gallery of Examples I like this example I like the linking of because of how it the letters. I like this example links. because of the contrasting sizes and weights. I like this example I like this example because it looks 3d because of how by the way they are they have used slanting and the round dots at the block form end of the stroke. I like the shading of how the letters are formed. I like this example because the type at the bottom portrays an industrial element, by the thinness and straight lines. I like how they have filled in the I like the linking of round shapes of the letters. the letters. I like thickness and contrast. References Rouse, M. 2005. Font. Retrieved from http://whatis.techtarget.com/definition/font Cousins, C. 2014. The complete Guide to Special Characters. Retrieved from http://designshack.net/articles/typography/the-complete-guide-to-special-characters/ Typography Deconstructed. 2014. Italics. Retrieved from http://www.typographydeconstructed.com/italics/ Butterick, M. Practical Typography. Retrieved from http://practicaltypography.com/ Christensson, P. (2011, February 11). Text Alignment Definition. Retrieved 2015, Aug 14, from http://techterms.com Lupton, E. 2009. Thinking with type. Retrieved from http://www.thinkingwithtype.com/contents/.