TYPOGRAPHY/LETTERING

2AD-6DEOFERIO

REYESYONQUE

DESIGN THEORY

?WHAT IS

TYPOGRAPHY

• TYPOGRAPHY is the art and technique of type design, arranging type and modifying type glyphs (glyphs meaning: a hieroglyphic character or symbol; pictograph / the building blocks of typography; any singular mark that makes part of a font)

• Typography came from the Greek word “typos” which means “mark, figure” and “graphos” which means “drawn or written.”

• A combination of font, size, spacing and colour

• TYPE is the means by which an idea is written and given visual form. Many typefaces in use today are based upon designs created in earlier historical epochs, and the characters themselves have a lineage that extends back thousands of years to the first mark-making by primitive man, when characters were devised to represent objects or concepts.

• LETTERING and TYPOGRAPHY is the style, arrangement, and appearance of style.

• The arrangement of type involves the selection of typefaces, point size, line length, line spacing, and the adjustment of spaces between groups of letters (tracking – a.k.a. letter spacing, is the overall spacing between letters in a block of text) and between pairs of letters (kerning – the art of adjusting the proximity of adjacent letters to optimise their visual appeal and readability)

LETTERFORMSTYPE FAMILIES

• ROMAN – roman is the basic cut of a typeface, so called due to its origins in the inscriptions found on Roman monuments. Roman is sometimes referred to as book, although book can also be a slightly lighter version of the Roman face.

• Italic – a true italic is a drawn typeface based around an angled axis. These are normally designed for serif typefaces. Obliques are slanted versions of sans-serif typefaces rather than a newly drawn version.

• Light – light is lighter or thinner version of the Roman cut.

• Boldface – bold, boldface, medium, semibold, black, super or poster all refer to a typeface with a wider stroke than the Roman cut.

LETTERFORMSTYPEWEIGHT VARIATIONS

• The naming of the variations is very diverse and abstract. The variety of names makes the comparison of different weights from different families difficult and confusing.

LETTERFORMSFRUTIGER’S

GRID

• Adan Frutiger is prominent in the pantheon of typeface designers. This is in large part due to the Univers family he launched in 1957 and the numbering system he developed to identify the width and weight of each the family’s 21 original cuts.

LETTERFORMSTYPES OF

SERIF

• Serifs are a key characteristic for identifying a typeface due to the variety of ways in which they have been employed throughout the development of typography. Serifs enhance the readability of a piece of text by helping the eye to advance from one character to the next. Many serif styles reflect the zeitgeist of a particular time, with some more ornate or bolder, while others are more discreet and refined.

LETTERFORMSTYPES OF

SERIF

• Unbracketed slab serif – a serif without any supporting brackets on TS-heavy slabs.

• Bracketed slab serif – the slab serifs are supported by subtle curved brackets.

• Bracketed serif – a serif with barely noticeable supporting brackets.

• Unbracketed serif – a standard serif without brackets.

• Hairline serif – a fine hairline serif without brackets.

• Wedge serif – the serif is shaped like a wedge rather than the typical rectangle or line shape.

• Slur serif – rounded serifs that look ‘unfocused’.

LETTERFORMSFRACTIONS

• Fractions can be represented in two ways depending upon how the bar separating the numerator and denominator is presented. Fractions may be nut or en fractions with a horizontal bar, or em fractions with a diagonal bar.

LETTERFORMSFRACTIONS

• Diagonal or em fractions – diagonal fractions are more pleasing to the eye and are commonly included with expert sets. These are also called em fractions as the bar is an em length.

• Horizontal or nut fractions – nut fractions are less common and have a bar that is an en in length.

LETTERFORMSSUPERSCRIPT

AND SUBSCRIPT

• Superscript and subscript are characters set at a reduced point size that are either top or bottom aligned. Text is often set in this way for notations such as footnotes and also for chemical and mathematical formulae.

LETTERFORMSNUMERALS

• Can be classified as Old Style and Lining according to how they are presented.

• Lining figures – lining numerals are aligned to the baseline and are of equal height. Old style numerals do not align to the baseline, which means they can be difficult to read. Lining numerals also have fixed widths, allowing for better vertical alignment in tables. By reversing the order of the numbers, a vertical alignment is maintained.

• Old style numerals – old style numerals have descenders and only ‘6’ and ‘8’ have the same proportions as their lining counterparts. Old style numerals are used in running text for dates as the characters function more like letterforms because they have descenders. The same date set in lining figures is much more prominent, which may be undesirable in body text.

GUIDES ON USING TYPE TO FORM

WORDS AND PARAGRAPHS

• Calculating line lengths –line length relates to the measure, the type size and also the typeface. The measure is the width of the text column being set.

• Kerning and letterspacing – kerning is the removal of space and letterspacing is the addition of space between letters to improve the visual look of type. Both can be performed manually or automatically.

• Word, spacing, hyphenation and justification – the use of word spacing, hyphenation and justification functions allows for greater control of word spacing in a text block by controlling the space between words.

GUIDES ON USING TYPE TO FORM

WORDS AND PARAGRAPHS

• Type detailing – text can rarely be flowed into a design and left without further adjustment.

• Leading – leading is a hot-metal printing term that refers to the strips of lead that were inserted between text measures in order to space them accurately. Leading is specified in points and refers nowadays to the space between the lines of text in a text block. Leading introduces space between the lines in a textblock. Leading introduces space into a text block and allows the characters to ‘breathe’ so that the information is easy to read.

GUIDES ON USING TYPE TO FORM

WORDS AND PARAGRAPHS

• Indents – text blocks can be indented so that some or all of the text lines are moved in from the margin by a specified amount. Traditionally, the first paragraph is not indented, with indentation commencing with the second paragraph. Indention provides the reader with an easily accessible entry point to a paragraph. The length of the indent can be related to the point size of the type such as a one em indent. Alternatively, indent points can be determined by the grid, such as in the basic grid produced from the golden section.

• Indexes – indexes provide a means of easily locating information within a volume. They are traditionally set solid, i. e. 9 on 9pt, but additional leading can be used.

GUIDES ON USING TYPE TO FORM

WORDS AND PARAGRAPHS

• Type size – the existence of extended type families mean that it is easy for a designer to use several different type sizes coherently within a design. However, it should be noted that the tracking (letterspacing) and leading may need to be adjusted to compensate for any increase or decrease in size type.

• Display type – display faces are designed to create a visual impact in headlines and standfirsts, and are not intended for use in long text passages

• Reversing type – type is usually printed in colour on to a substrate. It can also be reversed out of a solid colour that is printed on to a substrate, although there are some practical limitations to bear in mind.

TY

PO

GR

AP

HY

• is an essential communication and design element that has evolved over several centuries, and continues to evolve as tastes continually change and technological development makes it easier to develop new typefaces.

• can be a complex subject filled with technical terms and jargon, which have been defined and explained to facilitate more precise communication of requirements.

TY

PE • plays a fundamental role in the

communication process as much as through the shapes ans styling of the letterforms as that actual words that they form.

• type’s key role in communication means that it can often be tied to a specific event in history or cultural epoch. Type occupies a formal role in the recording of history. The permanence of the carved word and the value of the printed item are inseparable from our cultural heritage as type helps us to record, celebrate and remember.

TYPES AND CLASSIFICA

TION OF TYPES

• 3 BASIC GROUPS• With Serifs (little

feet and tails) • Without Serifs• Scripts (designed

to look like cursive handwriting)

TYPES AND CLASSIFICATION OF TYPES

TYPES AND CLASSIFICA

TION OF TYPES

• Serif Old Style - the axis of curved strokes normally inclines to the left in these designs, so that weight stress falls at approximately eight o’clock and two o’clock. The contrast in character stroke weight is not dramatic, and hairlines tend to be on the heavy side. Some versions, such as the earlier Venetian Old Style designs, are distinguished by the diagonal cross stroke of the lowercase.

• Serif Transitional – while the axis of curve strokes can be inclined in Transitional design, they generally have a vertical stress. Weight contrast is more pronounced than in Old Style designs. Serifs are still bracketed and head serifs are oblique.

TYPES AND CLASSIFICA

TION OF TYPES

• Serif Neoclassical/Didone – contrast between thick and thin strokes is abrupt and dramatic here. The axis of curved strokes is vertical, with little or no bracketing. In many cases, stroke terminals are ball shapes rather than the reflection of a broad pen.

• Serif Glyphic – contrast in stroke weight is usually minimal, and the axis of curved strokes tends to be vertical. The distinguishing feature of these typefaces is the triangular-shaped serif design, or a flaring of the character strokes at termination.

TYPES AND CLASSIFICA

TION OF TYPES

• Serif Clarendon – their stroke contrast is slight and serifs tend to be short to medium length.

• Serif Slab – have very heavy serifs with little or no bracketing. Changes in stroke weight are imperceptible.

• Sans Serif Grotesque – contrast in stroke weight is most apparent in these styles, there is a slight ‘squared’ quality to many of the curves, and several designs have the bowl-and-loop lowercase. In some cases the R has a curled leg and the G usually has a spur.

TYPES AND CLASSIFICA

TION OF TYPES

• Sans Serif Humanist – based on the proportions of roman inscriptional letters. Contrast in stroke weight is also readily apparent.

• Sans Serif Geometric – strokes appear like strict monolines, and seemingly perfect geometric forms make up the character shapes.

• Sans Serif Square – based on Grotesque character traits and proportions, have a definite and at time dramatic sweating of normally curved strokes. They have more latitude in character spacing than their sans serif cousins.

TYPES AND CLASSIFICA

TION OF TYPES

• Script Formal – derive from 17th century formal writing styles. Many characters have strokes that joint them to other letters.

• Script Casual – intentionally look informal or quickly drawn. Often they appear drawn with a brush. Character strokes connect one letter to the next.

• Script Calligraphic – these script faces mimic calligraphy. They can be connecting or non-connecting in design. Many appear written with a flat-tipped writing instrument.

TYPES AND CLASSIFICA

TION OF TYPES

• Script Blackletter/Lombardic – looks like manuscript lettering prior to the invention of movable type.

• Ornamental Antiques, Art Nouveau, and Art Deco – used for display applications between the mid 1800s and early 1900s.

• Ornamental Decorative – defy simple pigeonholding. They can look like letters cut from stencil or decorated with flowers, or can appear three-dimensional. Some use unorthodox letter shapes and proportions to achieve distinctive and dramatic results.

USAGE OF TYPE

• Posters• Books• Publications or magazines• Collateral• Identity• Corporate communications• Advertising/promotion• Wrapping paper• Packaging• Outdoor• Signange/wayfinding• interiors and environments• transportation• motion• interactive

TYPOGRAPHICPRINCIPLES

• format• typography selection• reading direction and

scanning• free placement• the grid• hierarchy• unity and variety• symmetry and asymmetry• white space• contrast• typeface pairing

HISTORY OF

TYPOGRAPHY

Type has developed over the last 600 years as the printing process has evolved. The characters that are printed, however, have been developed over a much longer time period as language itself has developed from Egyptian hieroglyphics to the Latin letters we use today.

01 • CUNEIFORM TABLETS • uses a wedge-shaped

stylus to make impressions into a wet clay tablet and the earliest standardised writing system. Early forms of cuneiforms were written in columns from top to bottom, but later changed to be written in rows from left to right. With this change, the cuneiform signs were turned on their sides.

02 • HIEROGLYPHICS • pictogrammic writing system

developed by several cultures including the ancient Egyptians and Incas. The hieroglyphics popularly used for historical, legal, and business records consisted of simplified symbol systems to speed the writing process.

• Hieroglyphics commonly run in vertical columns, read from top to bottom but not always startingwith the far right column. The same phonetic (spelling that corresponds to pronounciation) sound could be represented by a variety of symbols depending upon the scribe’s geographic location or education.

03 • IDEOGRAM-BASED LANGUAGES

• Ideogrammatic languages use characters or symbols to represent an idea or concept without expressing the pronunciation of a particular word or words.

• Ideogrammatic languages have a one-to-one relation between a symbol and an idea. (The meaning is understood but there is no indication of how this is vocalised.)

• Ideograph (or Ideogram) is the combination of two or more pictographs intended to represent a concept. They are pictographs that come to mean something other than their original intent. They often require interpretation and translation.

04 • PHOENICIAN CHARACTERS• symbols that represented sounds

rather than objects (22 magic signs). The symbols could be put together in different combinations to construct thousands of words, even though the alphabet only contained consonants and had no vowels.

• Phoenician alphabet was developed around 1200 BCE from an earlier Semitic prototype. The alphabet was a unique approach to writing.

• Phoenician was written horizontally from right to left without spaces between words, although dots were sometimes used to denote word breaks.

05• GREEK ALPHABET• adopted the letters of the Phoenician

system (asleph and beth). The word alphabet is the union of the Greek characters alpha and beta. Greeks added other characters to their alphabet around 800BC which became the basis of the modern day Hebrew and Arabic scripts. Five consonants were changed to vowels (alpha, epsilon, iota, omicron and upsilon) to account for the sounds in the Greek language that had no Phoenician equivalent. The Greeks introduced three new consonants which were appended to the end of the alphabet in the order in which they were developed. o write the alphabet the Greeks used an ivory or metal stylus to inscribe wax tablets.

06• CYRILLIC LANGUAGES• Cyrillic alphabets are those based

on Glagolitic (alphabet developed by missionaries during the 9th century to translate the Bible for the Great Moravia region) and used for Slavic languages such as Russian. It has 33 letters, including 21 consonants and ten vowels, and two letters without sounds that represent hard and soft signs.

• Late medieval Cyrillic letters tended to be very tall and narrow, with strokes often shared between adjacent letters.

07• SEMITIC LANGUAGES• comprise the languages

in Middle East.

• ROMAN ALPHABET• 26-letter Roman alphabet

that we use today was formed from the Greek alphabet and spread through the Roman Empire. Roman is now used to describe the basic letterforms, principally the minuscles (lowercase letters), even though the name is derived from the majuscule (uppercase letters) forms.

• ROMAN NUMERALS• The Romans used seven

of their letterforms as base numerals, with each letter representing a numeric building block. Numbers are constructed by stringing the blocks together. With this system the Romans did not need a character for ‘0’.

&• THE AMPERSAND• The ampersand character is a ligature of the

letters of the Latin word et, which means ‘and’. The name ’ampersand’ is a contraction of the phrase ‘and per se and’, which translates as ‘the symbol for and by itself means and’. The earliest usage of symbol dates back to the 1st century AD and it is now found in many languages that use the Latin alphabet.

• Charlemagne (Charles the Great) began to standardise all ecclesiastical texts around 800. Alcuin of York, Abbot of St. Martin of Tours, and his workface of monks endeavoured to rewrite all religious texts. They devised a print system including majuscules and minuscules. These became known as the Caroline Majuscules and would become the basis of modern typography.

08• MODERN ALPHABET• modern Latin alphabet

consists of 52 upper and lowercase letters with ten numerals and a variety of symbols, punctuation marks and accents that are employed by various different languages. The lowercase letters developed from cursive versions of the uppercase letters.

14th and 15th

CENTURIES

• JOHANNES GUTENBERG (1394-1468)

• did create the art of typography. He synthesized all existing devices into an economical and practical product. His adjustable mold enabled one letterform model produced by a designer to be replicated thousands of times. He took these products and combined them into works of typographic art that, more than 500 years later, are still considered some of the best ever produced.

• NICOLAS JENSON (1420-1480) • was one of the first printers to cut

and use fonts based on Roman rather than northern European Fraktur letterform.

• WILLIAM CAXTON (1421-1491)

• a man credited with introducing to England the craft of printing with movable type. He oriented one of the first commercial advertisements, a poster that extolled the products and services of his shop. Caxton eventually had eight fonts produced for his press, most in the Blackletter style of northern Germany, and one of which is generally considered the ancestor to old English types still used today.

• Movable type – many typographical terms originate with the different characteristics of these types of blocks. The physical dimensions of the block dictated spacing and made negative spacing impossible.

• Readability refers to how well the text is written and prepared, so as to facilitate reading. Readability depends on many factors including the colour of text in relation to its backgrpund, spacing, typeface, line length, justification, paragraph density and the grammar used.

• Legibility is the ability to distinguish one character from another, to turn letters into words and words into sentences due to qualities inherent in the typeface design.

• Blackletter – block, blackletter, gothic, old English, black or broken typefaces are based on the ornate writing style prevalent during the Middle Ages. These typefaces appear heavy and difficult to read in large text blocks due to the complexity of the letters and the fact that they seem antiquated and unfamiliar to us. Blackletter typefaces are commonly used to add decorative touches such as caps and on certificates. (font)

• ALDUS MANUTIUS (1450-1515)

• great Italian printer and type founder commissioned font designer Francesco Griffo to create several typefaces, the most important of which is how revived under the name Bembo.

• Bembo – an Old style font based on a Roman face cut by Francisco Griffo da Bologna, which Manutius used to print Pietro Bembo’s 1496 publication of De Aetna. It has modified letterforms such as the ‘G’ to create a typeface with 31 weights – all-purpose font family suitable for almost any application. Note the crossed strokes in ‘W’. (font)

• CLAUDE GARAMOND (1490 – 1561)

• was a Parisian printer established the first independent type foundry. He was instrumental in the adoption of Roman typeface designs in France. He also was one of his first type designers to create oblique capitals to complement an italic lowercase.

• Garamond – an Aldine font that is elegant and readable. Note the crossed strokes in ‘W’ and the bowl of ‘P’ that does not reach the stem. (font)

• ROBERT GRANJON (1513-1589)

• a font designer, his work provided the models for Plantin and Times new Roman.

EARLY 19th

CENTURY• Technological development

also meant that font creation took less time which opened the doors for the development of a wider range of typefaces and also made extending font families easier. One development of the time was the introduction of BOLDFACE.

• William Caslon IV designed the first sans serif font, creating the English serified design.

• INTERNATIONAL TYPEFACE CORPORATION (ITC) – was formed in New York to market new typeface designs, distribute royalties to the creators and extend rights to typographers that were threatened by the photographic copying of fonts.

• Arial Black – by Robin Nicholas and Patricia Saunders. Contemporary sans serif design that contains many humanist characteristics. The curves are softer and fuller than in most industrial styles sans serif faces. Terminal strokes are cut on the diagonal and help to give the face a less mechanical appearance. (font)

• Charter – designed by Matthew Carter. It is traditional old style typeface. (font)

• Verdana – by Matthew Carter. The font is stripped of features that are redundant on screen. Its characteristics are derived from pixel rather than the pen with weighting that ensures that pixel patterns at small sizes are pleasing, clear and legible. (font)

• Template Gothic – created by Barry Deck. Inspired by a laundrette sign made with stencil templates. (font)

BASICS OF TYPOGRAPHY

• Typographic terminology is rooted in the printing industry and developed as a means of communicating what can be the very pieces of information needed to set text.

• Font- the physical means to use to create a typeface, whether it be a typewriter, a stencil, letterpress blocks or a piece of PostScript code.

• Typeface- a collection of characters, letters, numerals, symbols and punctuation, which have the same distinct design.

BASICS OF TYPOGRAPHY

• Typography uses two types of measurements, absolute measurements and relative measurements.

• Absolute measurements – they are measurements of fixed values. All absolute measurements are expressed in finite terms that cannot be altered.

• Relative measurements – in typography, many measurements, such as character spacing, are linked to type size, which means that their relationships are defined by a series of relative measurements. (examples: ems and ens, leading)

• Points- the unit of measurement used to measure the type size of a font, for example, 7pt Times new Roman. This refers to the height of the type block, not the letter itself.

• Pica- a unit of measurement equal to 12 points that is commonly used for measuring lines of type. There are six picas (72 points) in an inch, which is equal to 25.4 millimetres.

• The Em- relative unit of measuring used in typesetting to define basic spacing functions and it is linked to the size of type. An em equals the size of a given type. (e. g. the em of 72pt type id 72 points)

BASICS OF TYPOGRAPHY

• The En- a unit of relative measurement equal to half of one on cm. An en rule is used to denote nested clauses, but it can also be used to mean ‘to’ in phrases such as 10-11 and 1975-1981

• Word space- a percentage value of an em, which makes it relative to the size of the type being set.

• X-height- the x-height of a typeface is the height of the lowercase ‘x’. It is a relative measurement that varies from typeface to typeface. The x-height is also used as key reference point in the layout of a design.

BASICS OF TYPOGRAPHY

• Serif/Sans serif- a serif typeface is one that has small cross lines at the ends of the different strokes, while a sans serif does not have these. These lines, often barely noticeable, aid our ability to recognize characters and help us to read by leading the eye cross the page. For this reason serif typefaces are generally easier to read than sans serifs. The clean lines of san serif typefaces are seen as being modern, while serifs are more traditional.

• Majuscule- uppercase letters• Minuscule- lowercase letters

BASICS OF TYPOGRAPHY

• Set width- the horizontal scaling of type, and is typically expressed as a percentage. It refers to the amount of space that each character uses. Altering the percentage value can stretch or shrink the character size.

• Baseline grid- an imaginary grid upon which type sits. The baseline of a piece of type can be forced to ‘snap’ to this grid to maintain continuity across the pages of a design.

• Cross alignment - cross alignment is the means by which text of varying sizes aligns to the baseline grid.

BASICS OF TYPOGRAPHY