75
Styles, Weights, Widths It’s All in the (Type) Family r - – — ÷ •••• •••• · · · · · · · ·

Manual de Tipografia Fontshop

  • Upload
    fhoyos

  • View
    32

  • Download
    4

Embed Size (px)

Citation preview

Page 1: Manual de Tipografia Fontshop

Styles, Weights, WidthsIt’s All in the (Type) Family

r

- – — ÷

• • • •• • • •· · · ·· · · ·

Page 2: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

IntroductionA quick note before we start – when we talk about typographic terms there is the official, “correct” terminology, and then there is the commonly accepted terminology. Because of the dramatic technological changes that occurred in the type industry in the previous century, definitions have shifted. For example in metal type a “font” is one single typeface design in one specific point size, which means that metal Palatino 12 pt and Palatino 16 pt are two separate fonts. Yet when phototypesetting started replacing metal typesetting in the 1970, type became scalable (thus size-independent) and “font” came to signify a single type style, disregarding point size. And the terms “typeface” and “font” are now often used interchangeably. A similar thing happens when talking about typefaces and type families, and styles, weights, and widths.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 3: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Typefaces and Type Families

The different variants in a type family demonstrated on FF Scala by Martin Majoor.

The above diagram illustrates the names for the different variations in a type family. A type family is a collection of related typefaces which share common design traits and a common name. A type style means any given variant of this coordinated design and is the equivalent of a typeface. Just like with the typeface/font debate we understand that some divisions have become blurred. This explains why the term typeface is not only used to specify a single style, but also quite often a type family with a number of weights and styles. When a regular user talks about the “typeface FF Scala” we understand that he or she

Bold Italic

Regular Italic Condensed

Bold Bold Condensedweights

styles

widths

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 4: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

means FF Scala in its basic variations Regular, Italic, Bold and Bold Italic, and sometimes even including the condensed widths and sans serif variants.

However – strictly speaking – the “typeface FF Scala” designates FF Scala Regular, and FF Scala Italic is another typeface. This distinction is quite important. When type foundries, vendors and resellers claim they carry a certain number of typefaces, they use the strict definition of the term. So even if ARS Type for example has 13 type families on sale, they are correct when they announce to offer 44 typefaces. And 88 fonts, as all their typefaces are available in two font formats: Mac PostScript and PC TrueType.

StylesThe concept of coordinated type families consisting of different related typefaces or styles is a fairly recent phenomenon. The two most common styles are roman (upright) and italic (a different, slanted design). The basic shape of italics is a stylized form of handwriting. It took form in the Renaissance when Aldus Manutius looked for a space saving alternative to roman faces. Without going too much into details, originally italics were designs in their own right, unrelated to roman designs and used independently. Only by the sixteenth century did the italic assume its current role as emphasis, a variation on the roman design.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 5: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Monotype Bembo is generally regarded as one of the most handsome revivals of Aldus Manutius’ 15th century roman type, but the original had no italic counterpart. The story is told that Stanley Morison commissioned Alfred Fairbank, a renowned calligrapher, to create the first italic for Bembo, which was released as metal fonts in 1929.

Alfred Fairbank’s design was based on the work of sixteenth-century writing master Ludovico degli Arrighi. However, Fairbank claimed that he drew it as an independent project and then sold his drawings to Monotype. According to him, “the statment has been made that I was asked to design an italic for the Bembo roman. This is not so. Had the request been made, the italic type produced would have been different.”

Whichever version you believe, it was obvious that Fairbank’s design–while undenibly beautiful–was not harmonious with Bembo roman. A second, more conventional italic was eventually drawn and added to the Bembo family.

bembo mt pro roman

bembo mt pro italic

fairbank mt pro

Comparison between Fairbank MT, presumably the original italic design for Bembo MT, and the eventual Bembo Italic MT. The small caps, oldstyle figures and alternates featured in the sample above are incorporated in the OpenType Pro digital fonts.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 6: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Typefaces and Type Families

Comparison between the Roman and the Italic of FF Nexus Serif, and an artificial oblique at the same angle of the Italic.

Both italics and obliques are slanted designs. They both serve the same function in text, namely emphasis. Italics are primarily found in serif designs, and obliques originally were mostly associated with sans serifs. Yet there is a crucial difference. While an oblique looks like a slanted version of the roman weight, an italic has a different design. Most notably the double-storey lowercase “a” and “g” turn into single-storey forms, although some designs preserve the double-storey “g”. Because of its origin in hand writing and calligraphy the position of serifs changes as well, with serifs being preserved on the in- and outgoing strokes (upper left and lower right), but removed in the opposite spots.

a g e f n x y za g e f n x y z

ff nexus serif reg

ff nexus serif italic

ff nexus serif reg obliqued a g e f n x y z

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 7: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

furry handgloves &furry handgloves &furry handgloves &furry handgloves &

bookman headline

bookman italic headline

bookman std light

bookman std light italic

Although it is called “Italic”, the original Bookman actually has an oblique; don’t let that swashalicious ampersand fool you. The Ed Benguiat redesign ITC Bookman on the other hand received a “proper” italic. But I largely prefer the original version – more bite and lots of attitude.

As the term italic refers to a design trait rather than simply the slant of the characters it is possible to have an upright italic. Some type designs use the name Italic when in fact they have an oblique, some call their obliques Slanted, and typefaces from German-speaking designers or foundries sometimes use Kursiv.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 8: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

official gym apparelofficial gym apparelAlthough its slant is almost imperceptible, FF Seria clearly has a true Italic.

Due to the rising popularity of humanist sans serifs nowadays it has become quite common to have true italics in sans serif families as well, just like the presence of small caps, hanging figures and extended ligature is not exceptional anymore.

Weights and WidthsAny variation in a type family can be called a style. There are two additional, more specific terms for certain types of variations: weight and width.

ff seria pro regular

ff seria pro italic

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 9: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

The weight on the one hand determines how bold the typeface looks, how heavy the strokes making up the characters are. The first related bold weights for text faces are even more recent than the first related italic faces. They date from the second half of the nineteenth century. Just like italics bold weights of text faces are used for emphasis within the text.

The traditional weights are Regular and Bold, with Light and Black being the outward extensions on the weight scale, and sometimes a Semibold in between. Yet currently there are families that feature up to a staggering 15 weights!

AaAaAaAaAaAaAaAaAaAaAaAaAaAaAaSince its inception Luc(as) de Groot’s Taz type family has steadily been expanded, and now includes a large series of distinctive hairline fonts and an Ultra Black for maximum impact on giant posters and in magazine headlines.

taz type family

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 10: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

The width on the other hand determines how wide the characters are. Contrary to the weights the standard width usually doesn’t have a specific name. The traditional widths are Condensed and Extra Condensed or Compressed towards the narrow end of the scale, and Extended to the opposite side, but here as well certain families nowadays offer up to six different widths.

Bureau Grot WideBureau Grot(esque)Bureau Grot CondensedBureau Grot CompressedBureau Grot CompressedFont Bureau’s gorgeous Bureau Grot is a versatile interpretation of the English nineteenth-century sans by 2007 SOTA Award winner and type design icon David Berlow. It comes in five weights and five widths, ranging from an extremely narrow Extra Compressed to a generous Wide.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 11: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

There is some confusion regarding the exact definition of a weight. Many users will call a weight any variation of a type family, be it weights, widths, italics, small caps et al. Others insist that the term weight only covers the meaning as outlined above. So although the former group may say Taz III comes in 30 weights, the latter will insist the family has 15 weights with matching italics. Similarly the former group consider Bureau Grot to be a 25 weight family, while the latter defines it as a type family in five weights and five widths. This is an ongoing discussion which is not likely to be resolved – just like the distinction between typeface and font.

Alternate Naming SystemsNow if anyone ever tries to fool you into believing Helvetica is the ultimate Modernist typeface, think again. Despite it being the preferred choice of the International Style, and in spite of all the hubbub for its fiftieth anniversary in 2007, the concept and structure for Helvetica as a type family didn’t match the Modernist standards. It originally started out as just a couple of weights and gradually expanded into the larger family we now know. Yet the end result was far from consistent, even so that in 1983 the entire family had to be reworked into Neue Helvetica, a family with a more structurally unified set of heights and widths.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 12: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

univers

styles, weights, widthsIt’s All in the (Type) Family

AaBb

univers

univers

univers

univers

53

63

73

93

univers

univers

univers

univers

45

55

65

75

univers

univers

univers

univers

45

55

65

75

univers

univers

univers

47

57

67

univers

univers

47

57

67

univers

univers

univers

39

49

59

Forget Helvetica – Univers is the original Modernist face, the first type family that exemplifies the International Style.

Page 13: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

The original type family to wholly embrace the Modernist principles is Adrian Frutiger’s Univers. It is the first ever family of typefaces designed according to a rational system of coordinated weights and widths. Remarkable for Frutiger’s approach is that he does away with the conventional naming of weights and widths, and uses numbers to define them – a revolutionary system at the time of its creation.

Indeed, the conventional names can be interpreted in different ways and sometimes lead to confusion. For example the Book weight intended for standard text setting is slightly heavier than the Regular/Roman/Normal in certain families yet lighter in other families. The Medium weight can be either heavier than the regular weight or actually be the regular weight. And one can only guess where a weight called News is located in the weight spectrum.

The numbering system on the other hand is perfectly unambiguous. The first digit defines the weight of the family member. As the number increases the weight gets bolder; the 30s being the lightest and the 80s the boldest in Univers. The second digit defines the width, with odd numbers for roman or upright styles and even numbers for italics or obliques. Logically 5 and 6 stand for the normal widths, at the centre of the width spectrum. Decreasing the second digit makes the design wider, and increasing it makes it more narrow. This allows the user to immediately know that Univers 73 is two increments wider and three increments heavier than Univers 48, and that Univers 48 is an oblique design and Univers 73 an upright one. Frutiger’s numbering system and variations thereof have become quite common for larger type families.

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 14: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

AbbreviationsType styles often are abbreviated in application menus and such. Here is a handy overview:

Rm RomanIt ItalicObl ObliqueSl SlantedTh ThinLt LightRg RegularNr NormalBk BookMd MediumDm Demi Bold

Sm Semi BoldHv HeavyBd BoldBlk BlackCom p CompressedCond CondensedNar NarrowW WideExt ExtendedEx, X ExtraUlt Ultra

styles, weights, widthsIt’s All in the (Type) Family

AaBb

Page 15: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationFontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein re-main the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta ff Meta Serif ff Dingbats 2.0

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann’s•TypoTips

TheRightFontfortheJob•

TypeAnatomy•

Page 16: Manual de Tipografia Fontshop

What is OpenType?

r

- – — ÷

• • • •• • • •· · · ·· · · ·

Page 17: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

IntroductionOpenType® is a modern font format developed by Adobe® and Microsoft® to provide users with an accessible and advanced typographic toolset. OpenType improves on PostScript and TrueType just as the DVD trumped the video cassette. When deciding what format to choose, using the latest technology simply makes sense, but let’s dig a bit deeper and explore the ways OpenType makes life easier for typographers and graphic designers.

what is opentype?

openType

Page 18: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

what is opentype?

One Style = One File The PostScript format is limited to 256 characters per file. Metrics information and extra characters often need to be stored in additional files. This becomes especially unwieldy in a Windows PostScript font where a single typeface family can require hundreds of pieces.

Based on Unicode, an OpenType file cancontain up to 65,535 characters or glyphs.This allows for extensive language supportand makes room for advanced typographicfeatures like ligatures, various figurestyles, fractions, stylistic alternates,swashes, small caps, ornaments, borders,and so on. All these extras can live inone file instead of many. A single OpenType file contains all the informationrequired for a typeface style: metrics, kerning, outline, hints, and bitmaps.

“Embrace the power of OpenType”

openType

����������������

tt tt tt tt

ps ps ps ps

tt tt tt tt

ps ps ps ps

adot

Page 19: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Mac and PC CompatibleBest of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing that reflow. Everywhere you use an OpenType font, it is the same typeface, same kerning, same line breaks.

OpenType is PowerfulOpenType fonts will work in nearly any application on any modern operating system, but when you use a truly OpenType savvy application the format’s power is unlocked. Applications that support advanced OpenType features include Adobe InDesign CS, Illustrator CS, Photoshop CS, and newer versions of Quark XPress. These apps provide easy access to typographic features, so you can convert figures and lowercase to true small caps, all without changing the font. Many features kick in automatically, like ligature substitution. As these transformations are made, the raw text stays untouched. You can spellcheck or paste the text into other applications and the original copy’s integrity is maintained.

what is opentype?

openType

lz

Page 20: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

What’s Inside?Each OpenType font can include a variety of features. Some fonts have more extras and language support than others. Some foundries use the labels “Pro” and “Extra” to describe the feature-rich versions of their fonts. Unfortunately, there are no industry standards to define these terms, so we’ve made it easy to see what’s included in any OpenType font by listing those goodies in the gray sidebar on Font Detail pages and showing corresponding glyphs in the Character Set viewer. Here are the most common OpenType features:

what is opentype?

abcABC

(C-SF)ffist

abcABC(C-SF)ffist

small caps

small caps from caps

case-sensitive forms

standard ligatures

discretionary ligatures

lining figures

oldstyle figures

fractions

ornaments

12345678901234567890

1⁄2 3⁄4@ f V 5 } ·

openType

ff scala by fontfont

sabon by linotype

museo sans by exljbris

tycho by fountain

ff unit by fontfont

flex by bold monday

flex by bold monday

alto by ourtype

magneta by typetrust

Page 21: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationFontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein re-main the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta ff Meta Serif ff Dingbats 2.0

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann’s•TypoTips

TheRightFontfortheJob•

TypeAnatomy•

Page 22: Manual de Tipografia Fontshop

Figuring It OutOSF, LF, and TF Explained

r

- – — ÷

• • • •• • • •· · · ·· · · ·

Page 23: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

IntroductionNumerals (or figures) can take various forms. The figure style you choose ought to be appropriate to the project you are working on. Readability is key. But which style is best for which purpose? There are two main forms, oldstyle figures (OSF) and lining figures (LF). Each can come in tabular and proportional widths. See some examples above.

Oldstyle FiguresOldstyle figures are Arabic numerals varying in height and position. Some sit on the baseline while others descend beneath the baseline. The 6 and 8 are commonly the tallest figures and the 3,4,5,7, and 9 descend below the baseline, while the 0, 1, and 2 are roughly the same height of the lowercase letters. This feature allows them to harmonize with other words on a page of text without becoming a distraction to the reader. So oldstyle figures are most appropriate in books or any running text. Oldstyle figures are also known as non-aligning figures, text figures or oldstyle numerals.

figuring it outOSF, LF, and TF explained

By the year 1996, Roman Catholic nun Mother Theresa († September 5, 1997) was operating 517 missions in more than 100 countries.

123123

Lining Figures

Oldstyle FiguresBy the year 1996, Roman Catholic nun Mother Theresa († September 5, 1997) was operating 517 missions in more than 100 countries.

better

Page 24: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Lining Figures

Lining figures are derived from oldstyle figures. They are a modern style with all figures at a common size and position and even height as the uppercase letters (but sometimes smaller and lighter than the capitals). Today, most fonts use these as default. Lining figures sit on the baseline as opposed to oldstyle figures that appear at different heights and positions. They optically align along a height line and the baseline. The best applications are business reports, forms, tables or any place where alignment is crucial. Lining figures are also known as regular numerals or titling figures.

Oldstyle Figures7 scallions, thinly sliced19 large shrimps or prawns23 large eggs, lightly beaten1 1⁄2 cup canola oil or cooking oil

Lining Figures7 scallions, thinly sliced19 large shrimps or prawns23 large eggs, lightly beaten1 1⁄2 cup canola oil or cooking oil

figuring it outOSF, LF, and TF explained

123123

better

Page 25: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Tabular FiguresTabular figures are mono-width, they align vertically and thus appear in documents that compare numerical data in columns. Each figure shares the same width and space on both sides.

Proportional FiguresProportional figures are different in their total character width. They are spaced to fit together more like letters. For instance, the figure 1 is very narrow like the letter l and takes up less width than the number 6. Because their spacing appears more even, these figures are best in texts and headings where columnar alignment is not necessary.

Now that you know the differences between the two figures styles and their two widths, you know what to buy for your particular needs. Fortunately, some foundries make it simple by including each available figure style for a typeface in a purchasable package. OpenType, though, makes it even simpler. Most OpenType fonts include all available figure styles within a single font. So there’s no switching between fonts to get to the right figures.

$ 4219.82$ 23.11

$ 257.00

$ 4219.82$ 23.11

$ 257.00

figuring it outOSF, LF, and TF explained

123123

Tabular Figures

Proportional Figures

Page 26: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationFontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein re-main the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta ff Meta Serif ff Dingbats 2.0

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann’s•TypoTips

TheRightFontfortheJob•

TypeAnatomy•

Page 27: Manual de Tipografia Fontshop

ascender The upward vertical stem on some lowercase letters, such as ‘h’ and ‘b’, that extends above the x-height is the ascender.

apertureThe aperture is the partially enclosed, somewhat rounded negative space in some characters such as ‘n’, ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.

axisAn imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.

baselineThe imaginary line upon which the letters in a font appear to rest.

bowl The curved part of the character that encloses the circular or curved parts (counter) of some letters such as ‘d’, ‘b’, ‘o’, ‘D’, and ‘B’ is the bowl.

bracketThe bracket is a curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

type anatomyQuick Reference

— Basic parts of a typeface

a

Typeface Anatomy

HandgloveryBracket Crossbar

Stem Terminal

Counter

Loop/Lobe

Axis

Link/Neck

Bowl Eye

Aperture

Tail

Descender

SerifShoulder

Ascender

Ear

Overshoot

cap-height

x-height

baseline

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Page 28: Manual de Tipografia Fontshop

cap heightThe height from the baseline to the top of the uppercase letters (not including diacritics).

counterThe enclosed or partially enclosed circular or curved negative space (white space) of some letters such as ‘d’, ‘o’, and ‘s’.

crossbarThe (usually) horizontal stroke across the middle of uppercase ‘A’ and ‘H’ is a crossbar.

descenderAny part in a lowercase letter that extends below the baseline, found for example in ‘g’, ‘j’, ‘p’, ‘q’, ‘y’, etc. Some types of descenders have specific names.

earTypically found on the lower case ‘g’, an ear is a decorative flourish usually on the upper right side of the bowl.

eyeMuch like a counter, the eye refers specifically to the enclosed space in a lowercase ‘e’.

link/neckThe stroke, often curved, that connects the bowl and loop of a double-storey ‘g’.

loop/lobeIn a double-storey ‘g’, the loop is the enclosed or partially enclosed counter below the baseline that is connected to the bowl by a link. The enclosed or partially enclosed extenders on cursive ‘p’, ‘b’, ‘l’, and similiar letters are also called loops.

tailThe descending, often decorative stroke on the letter ‘Q’, or the descending, often curved diagonal stroke on ‘K’ or ‘R’ is the tail.

terminalThe end (straight or curved) of any stroke that doesn’t include a serif.

x-height The height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.

type anatomyQuick Reference

a

FontShop EducationWithout training the best typefaces can only go so far. That’s why FontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein remain the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

ColophonThis document is set in ff Meta Serif for titles, and ff Unit for captions and text.

Further Reading

• FontShop Fundamentals 2

• Erik Spiekermann's Typo Tips

• Type Glossary

• Type Anatomy

Online Resources

• Fontshop.com

• FontFeed.com

• Spiekermann.com

www.fontshop.com/education toll free at 888 ff fonts 415.252.1003

Page 29: Manual de Tipografia Fontshop

Type Selection: Beyond the Look of the Letter

The Right Fontfor the Job

F

Page 30: Manual de Tipografia Fontshop

Type SelectionBeyond the Look of

the Letter

www.fontshop.com toll free at 888 ff fonts 415.252.1003

A

Why do some fonts cost more than others? Why are there so many versions of the same typeface? These are good questions. Fortunately, we have answers. Introducing the first edition of FontShop Fundamentals, an educational series dedicated to type tips and design ideas. Let’s go beyond form and dig into font function. Below are four main ways fonts can differ, even if most of their letters look the same. Save, bookmark, or print this document and ask yourself these questions the next time you’re choosing type.

How do I know which font is right for the job?

Page 31: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

The font has the right form.What about the function?

A few years ago, you had to make a decision between TrueType or PostScript and Mac or Windows. Today, the choice is usually fairly simple: OpenType is the most convenient and full-featured font format, compatible with all modern screen and print workflows.

All the extras that are commonly spread across multiple PostScript or TrueType files can live in one OpenType file. Best of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing reflow.

Regular

Regular forWindows

Ornaments

OldstyleFigures

Swashes

Small Caps

ExpertFractionsSuperscriptSubscript

CentralEuropean

Cyrillic Greek

RegularMac &Windows

Ornaments& Borders

FiguresOldstyle/LiningProportional/TabularFractionsOrdinalsSuperscriptSubscript

Ligatures Alternate GlyphsSwashes

Small Caps

OpenType is the best choice for graphic designers working in updated versions of Adobe® CS and QuarkXPress®. It’s often the best choice for non-designers as well, such as users in the corporate environment who want cross-platform compatibility or who set type in Greek, Russian, or other Eastern European languages.

postscript font opentype font

1.

Page 32: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

If you use applications like Microsoft® Office® and QuarkXPress® 6.5 (or older) which don’t support OpenType’s advanced features, and you need access to extras like small caps and alternate glyphs, you may need to stick with legacy formats for now. Or check out Office FontFonts which are OpenType fonts created specifically for MS Office.

Does it include all the features I need?

Most fonts contain the basic characters you need for setting a line of text, but often it’s the extras that set one version of a typeface apart from the others. Additional glyphs have the power to save you time, or make your work look great, and read well. Here’s how.

Height in Kilometers

Typographic Features. Some fonts come with one style of capitals and one kind of figure set (numbers). That will work fine for most headlines and display work. But if you’re setting body copy or columns of data you may need small caps and appropriate figures such as oldstyle figures for text, tabular figures for tables, and proper fractions. Most professional fonts have all these extras.

arnhem

2.

Page 33: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

ff unit

suomi hand script

berranger script

Written by Seamus Smith

Ligatures and Contextual Alternates. Sometimes you can get by with a basic handwriting font, but to truly replicate the natural flow and variation of a pen on paper, an advanced script employs ligatures and glyphs that change according to their position in a word.

Stylistic Alternates. A single typeface can take on a completely different flavor simply by using alternate letterforms. When you buy a font like FF Unit that has a large set of alts it’s almost like you’re getting several typefaces in one.

Does it speak my language?

Nearly every commercial font contains all the characters you need for Western European languages, such as English, Spanish, French, German, Italian, and those of Scandinavia. Fonts that support Central (ce) and

nn

n n

nNatural Ligatures Avoids duplicate letterforms

Authentic letter connections

3.

Page 34: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Eastern European languages like Czech, Polish, Hungarian and sometimes Russian and Greek are often called “Pro” fonts and can cost a bit more for the benefit of reaching a broader audience.

Plan ahead: select fonts that support all the languages you might want to speak to in the future. If there’s ever any question about whether a font has the characters you need, you can always check its glyph set in the Specimen tab found on every Single Font page at FontShop.com. Western European characters are always on the first page with other character sets represented in the pages that follow.

OpenType Features Hover over a feature to learn more. Click a feature to filter Character Set view.

Show All CharactersFractionsMathematical GreekProportional FeaturesTabular Figures

Access All AlternatesKerningNumeratorsStylistic Alternates

Case-Sensitive FormsStandard LigaturesOldstyle FiguresStylistic Set 1

Stylistic Set 2KerningOldstyle FiguresStylistic

A B C D E F G H I J

All Glyphs (255 of 411 glyphs) Pages:

1 2 [Next »}

Display Sample Text Sample Character Set

24pt

fontshop.com character set viewer

language support comparison between ff din ot and ff din pro

Page 35: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

ff clan

Is it all in the family?

For some uses, a basic set of weights (regular, italic, bold, bold italic) is all you need. For more intensive work, such as a publication or corporate identity, investing in a comprehensive family or suite of related typefaces makes sense both stylistically and logistically.

Weights and WidthsA font family with a wide range of weights and widths gives you extra flexibility for setting type in any kind of situation — whether it’s a twenty-foot billboard or a tiny footnote — while maintaining a consistent style throughout.

aaaaaa

aaaaaa

a�aaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

Compressed

Condensed

Narrow

Regular

Wide

Extended

Ligh

t

Book

New

s

Med

ium

Bold

Blac

k

Ultr

a

4.

Page 36: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

ff nexus serif

ff nexus sans

ff nexus mix

ff nexus typewriter

rumba

Optical Size VariantsA type family with Optical Sizes offers sturdy, readable cuts for text, and showy titling styles for the big stuff, yet all recognizable as a single, cohesive type design.

hhhSuperfamilies and SuitesFamilies with complementary serif, sans, and/or slab versions extend a typographic palette even wider and answer the age-old question, “what typeface works well with this one?” Many sans/serif companions are available as a single package for a reduced price. It’s a one-time investment that can pay dividends for years down the line.

Hamburgerfontsiv

Hamburgerfontsiv

HamburgerfontsivHamburgerfonts

Small Large Extra

Page 37: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationWithout training the best typefaces can only go so far. That’s why FontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein remain the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta Headline for titles, ff Meta Serif for text, and ff Unit for captions.

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann's•TypoTips

TypeGlossary•

TypeAnatomy•

Page 38: Manual de Tipografia Fontshop

The Typographer’sGlossaryCommon Type Terminology

r

- –

— ÷

• • • •• • • •· · · ·· · · ·

Page 39: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

Aa

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

Aa

A as in AscenderaccentsSee Diacritics.

alternatesDifferent shapes (or glyphs) for the same character in a typeface, for example small caps, swash characters, contextual alternates, case-sensitive forms, etc.

When alternates are built-in as OpenType features, certain (older) operating systems and applications will not be able to access them.

fonts used:ff meta

ff dingbats 2.0ministry script

alternates example:

Page 40: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

Handglove

ApertureThe aperture is the partially enclosed, somewhat rounded negative space in some characters such as ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.

a n eY

Y

Y

ascenderAny part in a lowercase letter that extends above the x-height, found for example in b, d, f, h, k, etc. Some types of ascenders have specific names.

aperture example:

ascender example:

font used:leitura news

axisAn imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.

fonts used:amplitude

ff dingbats 2.0

Y Y

Page 41: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

BbBb

B as in Baselinebalt (baltic)(appended to a font or volume name) Language support; includes all necessary accents and characters for Estonian, Latvian, and Lithuanian (also included in CE – for Mac only). The supported languages may vary a little depending on the foundry.

baselineThe imaginary line upon which the letters in a font appear to rest.

baseline example:

font used:bree

bodyOriginally the physical block on which each character sat, in digital type it is the imaginary area that encompasses each character in a font. The height of the body equals the point size; its width is related to the width of the character.

YCityscape

Page 42: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

bowlThe curved part of the character that encloses the circular or curved parts (counter) of some letters such as ‘d’, ‘b’, ‘o’, ‘g’, ‘D’, and ‘B’ is the bowl.

bracketThe bracket is a curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

Page 43: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

CcCc

C as in Cap heightcap heightThe height from the baseline to the top of the uppercase letters (not including diacritics).

case-sensitiveThe position of a number of punctuation marks like hyphens, brackets, slashes etc. is centred on the x-height of the lowercase letters. Fonts with case-sensitive punctuation also have slightly raised alternates of these characters that are centred on the cap height (the height of the uppercase).

When case-sensitive forms are built-in as OpenType features, certain (older) operating systems and applications will not be able to access them.

fonts used:museo

case-sensitive off

case-sensitive on

cap height and case-sensitive example:

(Spider-man)

(Spider-man)

Page 44: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Mogę Cię pocałować?Hová valósi Ön?Jednolůžkový

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

central european (ce)(appended to a font or volume name) Language support; includes all necessary accents and characters for Albanian, Croatian, Czech, Estonian, Finnish, Hungarian, Latvian, Lithuanian, Polish, Romanian, Slovak, Slovenian, and Sorbian (lower and upper).

characterAny letter, numeral, punctuation mark, and other sign included in a font. Some characters can be represented by more than one glyph.

comLinotype’s “Communication” (or Com) fonts have been optimised for international communication and for use with Microsoft Office applications. They are TrueType-flavored OpenType fonts and are compatible with Mac and Windows operating systems.

contextualFeature-rich OpenType fonts with contextual alternates can detect certain characters or character combinations before and/or after specific characters and substitute them with alternate glyphs or ligatures according to the context.

font used:ff meta

central european example:

polish

hungarian

czech

Page 45: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

counterThe enclosed or partially enclosed circular or curved negative space (white space) of some letters such as d, o, and s is the counter.

crossbarThe (usually) horizontal stroke across the middle of uppercase ‘A’ and ‘H’.

cyrillic (cyr)(appended to a font or volume name) Language support; includes the Cyrillic alphabet and all necessary accents for the Cyrillic languages.

The supported languages may vary a little depending on the foundry.

font used:ff din

cyrillic example:

Очень приятно

Page 46: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

yukon gold

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

DdDd

D as in DiacriticsdescenderAny part in a lowercase letter that extends below the baseline, found for example in g, j, p, q, y, etc. Some types of descenders have specific names.

font used:co headline

descender example:

Y Y

Page 47: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

diacriticsA diacritic is a ancilliary mark or sign added to a letter. In the Latin alphabet their function is to change the sound value of the letters to which they are added; in other alphabetical systems like Arabic or Hebrew they may indicate sounds (vowels and tones) which are not conveyed by the basic alphabet.

fonts used:tanger serif

diacritics example:

displayA category of typefaces designed for decorative or headline use. As opposed to text typefaces, display typefaces are usually meant for larger settings.

Page 48: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

EeEe

E as in EarearTypically found on the lower case ‘g’, an ear is a decorative flourish usually on the upper right side of the bowl.

embeddingIncluding font information in a digital document, to ensure that the text is rendered with the font specified by the author. Some EULAs restrict embedding.

eot (embeddable opentype)File format developed by Microsoft to enable TrueType and OpenType fonts to be linked to web pages for download, to ensure that the text is rendered with the font specified by the author. Some EULAs restrict using EOT files.

gfonts used:ff nexus serif

ear example:

Y

Page 49: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

eula (end user license agreement)As with most software, fonts are licensed to individuals and organisations. The EULA defines the terms and provisions for use of the font software. The EULA also indicates the number of CPUs or concurrent Users the fonts may be installed on. The number of CPUs/Users for which a font is initially licensed can vary depending on the manufacturer/foundry.

expert setA font that contains special characters, such as small caps, fractions, ligatures, extra accents, and alternate glyphs. Because TrueType and PostScript only support a limited number of glyphs, some characters that are not used as frequently come in an expert font. OpenType fonts on the other hand, have the capacity for thousands of glyphs, so one font can include all these extras plus other alphabets etc.

eyeMuch like a counter, the eye refers specifically to the enclosed space in a lowercase ‘e’.

efonts used:ff amman sans

eye example:

Page 50: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

FfFf

F as in FontfamilyA collection of related typefaces which share common design traits and a common name. A type style means any given variant of this coordinated design and is the equivalent of a font or typeface.

Super families are very extensive with a very large number of weights and widths. Type systems are collections of related type families that cross type classifications.

fontA collection of letters, numbers, punctuation, and other symbols used to set text (or related) matter. Although font and typeface are often used interchangeably, font refers to the physical embodiment (whether it’s a case of metal pieces or a computer file) while typeface refers to the design (the way it looks). A font is what you use, and a typeface is what you see.

foundryA company that designs and/or distributes typefaces; a type manufacturer. FontShop.com carries fonts from over 80 foundries.

Page 51: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

HhGg

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

G as in GlyphglyphEvery character in a typeface, (e.g: G, $, ?, and 7), is represented by a glyph. One single type design may contain more than one glyph for each character. These are usually referred to as alternates.

greek(appended to a font or volume name) Language support; includes the Greek alphabet and all necessary accents for Greek.

hanging figuresSee Oldstyle figures

hybrid figuresAn intermediary style between oldstyle figures and lining figures, hybrid figures are somewhat smaller than the capital letters and have a consistent body size, yet some parts extend slightly upwards and downwards.

When the different figure sets are built-in as OpenType features, certain (older) operating systems and applications will only be able to access the default figures.

Page 52: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

LlIi

I as in ItalicsitalicA (mostly) slanted type style which takes its basic shapes from a stylised form of handwriting, and is usually narrower than its roman counterpart. Italics are commonly used for emphasis in text. They are primarily found in serif designs, while obliques originally were associated with sans serifs.

leadingThe vertical space between lines of text (baseline to baseline). Also known as linespacing.

ligaturesSpecial characters that are actually two letters or more combined into one. In cases where two adjacent characters would normally bump into each other, a ligature allows the letters to flow together more gracefully. This usually makes word shapes more aesthetically pleasing.

wa±e ironsfont used:garage gothic

ligature example:

Page 53: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

lining figures (LF)Numbers that rest on the baseline, and are usually the same height as capital letters. Lining figures may be tabular or proportional.

loop/lobeIn a double-storey ‘g’, the loop is the enclosed or partially enclosed counter below the baseline that is connected to the bowl by a link. The enclosed or partially enclosed extenders on cursive ‘p’, ‘b’, ‘l’, and similar letters are also called loops.

lowercaseThe small letters in a typeface. The name refers to the days of metal type, as the small letters were kept in the lower part of the type case.

font used:ff tisa

lining figures example:

lining figures old style figures

1984 1984

Page 54: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

MmMm

M as in MonospacedmonospacedA font in which every character has the same width, and no kerning pairs. This allows for neatly setting columns of text and tables, for example in programming code, accounting, etc.

Transfigure

Transfigure

fonts used:the sans

the sans mono

monospaced example:

proportional spaced

monospaced

Page 55: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

OoOo

O as in Oldstyle FiguresobliqueA font that is slanted. Oblique fonts are different from italic fonts, in that they are mechanically sheared, then slightly adjusted. Italic fonts, on the other hand, are designed differently from upright or roman versions. They are usually narrower than their roman counterparts, and reflect more of a calligraphic sensibility than lowercase oblique fonts.

offcFontFont offers a TrueType-flavored OpenType format called Offc (or Office). Offc fonts are ideal for users of Microsoft Office and other word processing and spreadsheet applications. They are style-linked so as best to take advantage of the applications’ style selection options. Offc fonts also offer full compatibility across platforms.

Swag, Swagfont used:urw antiqua

oblique example:

italic oblique

Page 56: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

oldstyle figures (osf)Numbers that have different heights, some aligning to the baseline, some below. Oldstyle figures harmonize well with lowercase letters. Using oldstyle figures helps keep the numbers from standing out too much and disturbing the overall flow of the typography on the page.

opentype The most recent font format emerged at the beginning of the new millennium. OpenType was initially developed by Microsoft. In a few years time it has become the new standard format for digital fonts. The biggest advantages shared by all OpenType fonts are their single file structure, cross-platform compatibility, and advanced typographic functionality. This means any single OpenType font file will work on both Mac and Windows systems, and some OpenType fonts include expanded character sets and special features like automatic ligatures and alternate glyphs. OpenType is the best format for most purposes.

optical sizeSome type designs come in different versions optimized for use in specific point sizes. Subtle variations in weight, contrast, and proportion make them as legible in small text as they are beautiful in big headlines.

font used:ff tisa

oldstyle figures example:

lining figures old style figures

1984 1984

Page 57: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

PpPp

P as in Picapetite capsSlightly smaller than small caps, petite caps are capital letters that are exactly as high as the x-height of the lowercase letters.

picaA typographic unit of measure corresponding to 1⁄72nd of its respective foot, and therefore to 1⁄6th of an inch. The pica contains 12 points. The standard in contemporary printing (home computers and printers) is the computer pica (1⁄72nd of the Anglo-Saxon compromise foot of 1959, i.e. 4.233 mm or 0.166 in). At 100% zoom one computer pica corresponds to 12 image pixels on a computer monitor display, thus one computer point corresponds with one image pixel.

pixelPixel fonts are modular type designs that take advantage of the pixel grid to render often very small type on screen. They are very popular in web design, but also became an aesthetic on their own.

pointType sizes are generally expressed in points. The point is a typographic unit of measure corresponding to 1⁄12th of a pica. At 100% zoom one computer point corresponds with one image pixel on a computer monitor display.

Page 58: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

point sizeThe point size of a typeface refers to the size of the body, the imaginary area that encompasses each character in a font. This is why a typeface with a large x-height appears bigger than a typeface with a small x-height at the same point size.

postscriptA technology developed and trademarked by Adobe Systems, Inc. On older systems, PostScript fonts require Adobe Type Manager. On the Mac, PostScript fonts consist of a printer font and a bitmap suitcase, which should always be kept together.

PostScript fonts are generally more difficult to maintain, and PostScript fonts can have compatibility issues with some operating systems like Vista.

proOpenType Pro fonts share the same technical specifications as OpenType Standard (Std, or simply OT) fonts, but support a broader range of languages. Standard OT fonts contain support for Western languages, while Pro fonts include Central European and often Latin Extended, and often Greek and/or Cyrillic and Extended Cyrillic.

proportional figuresProportional figures are different from Tabular figures in their total character width. They are spaced to fit together more like letters. For instance, the figure 1 is very narrow like the letter l and takes up less width than the number 6. Because their spacing appears more even, these figures are best in texts and headings where columnar alignment is not necessary. There are Proportional Lining Figures and Proportional Oldstyle Figures.

Page 59: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

SsRr

R as in RomanromanThe (standard) upright type style. The term Roman is also sometimes used to denote the Regular weight.

small capsSmall caps are capital letters that are approximatively as high as the x-height of the lowercase letters. When properly designed small caps are absent in the selected font, many applications can create small caps by scaling down the capitals. However this makes these fake small caps too light and narrow, and they don’t harmonise properly with the lowercase. Originally small caps were only available for the roman text weight(s), but nowadays many type families also have them for the italics and the bolder weights.

When small caps are built-in as OpenType features, certain (older) operating systems and applications will not be able to access them.

font used:ff quadraat

small caps example:

Beguiling

Page 60: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

spacingSpacing refers to the distribution of horizontal space on both sides of each character in a font to achieve a balanced and even texture. Spacing problems in difficult letter combinations (exceptions) are solved with kerning. Well-spaced fonts need comparatively less kerning pairs.

std/ot (opentype standard)(appended to a font or volume name) OpenType Standard fonts support the basic range of languages. Some foundries use the abbreviation Std, while others simply use OT. In the latter case OT identifies both the font format and the language support. Some foundries do include Central European (CE) and Turkish in their OpenType Standard fonts.

styleAny given variant in a type family; the equivalent of a single font or typeface.

style-linkingFamilies of fonts that are grouped together under a single item in the font menu. To access other styles in a style-linked family, use the style buttons in the application that you are using. Some applications like for example the Adobe Creative Suite don’t support style-linking, yet still conveniently list the fonts by family.

stylistic setIn OpenType fonts with alternate glyph shapes for certain characters, different character sets can be grouped in stylistic sets. Instead of having to manually switch individual characters, the user can select the appropriate stylistic set which has all the desired alternates.

Certain (older) operating systems and applications cannot access the stylistic sets, making only the default character set available.

Page 61: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

swashAn elegant extension on a letter form, either a modification of an existing part or an added-on part.

When swash characters are built-in as OpenType features, certain (older) operating systems and applications will not be able to access them.

CarmenCarmen

fonts used:dear sarah

swash example:

Page 62: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

TtTt

T as in Typographytabular figures (tf)Numbers that share identical character widths (that is, they are monospaced). Using tabular figures enables you to set columns of numbers, and have them neatly line up vertically. This is especially useful for tables, thus “tabular”. Tabular figures are often lining.

When the different figure sets are built-in as OpenType features, certain (older) operating systems and applications will only be able to access the default figures.

tailIn typography, the descending, often decorative stroke on the letter ‘Q’ or the descending, often curved diagonal stroke on ‘K’ or ‘R’ is the tail.

terminalThe end (straight or curved) of any stroke that doesn’t include a serif.

truetype (tt/ttf)A font format developed by Apple Systems, Inc. and licensed to Microsoft Corp. TrueType fonts are natively supported by the Windows and Mac operating systems. On the Mac, both the printer and screen fonts are combined in a single TrueType font suitcase file.

Page 63: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

turk/tu (turkish)(appended to a font or volume name) Language support; includes all necessary accents and characters for Turkish.

type systemAlso called super families, type systems are collections of coordinated type families that cross type classifications, and are designed to work together in perfect harmony. They can be sans and serif companions, text and display cuts, or any other combination. The different families in a type system or super family share common character architecture, proportions, x-height, weights, and pedigree, to name a few.

typefaceAn artistic interpretation, or design, of a collection of alphanumeric symbols. A typeface may include letters, numerals, punctuation, various symbols, and more — often for multiple languages. A typeface is usually grouped together in a family containing individual fonts for italic, bold, and other variations of the primary design.

Page 64: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

UuUu

U as in UppercaseunicaseType design with upper- and lowercase letter forms that share the same height.

uppercaseThe capitals in a typeface. The name refers to the days of metal type, as the capitals were kept in the upper part of the type case.

showmanfont used:ingeborg

unicase example:

Page 65: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

the typographer’s glossaryCommon Type Terminology

type glossary | ab c d e f gh i j k l m n o p q r s t uv w x yz

WxVv

V as in VolumevolumeFonts can be purchased individually, but packages or volumes always offer the best value and performance. A font volume is a collection of fonts that are sold as a unit. This can either be a type family, part of a type family, or a collection of fonts that are stylistically or thematically related.

weightA single style or iteration of a typeface. Sometimes, the term “weight” refers specifically to the heaviness of a typeface. However, it is often used as a general term for any style: Italic, Small Caps, Bold, Light Expert, etc.

westernLanguage support; includes all necessary accents and characters for Albanian, Breton, Catalan, Danish, Dutch, English, Finnish, French, German, Icelandic, Irish, Italian, Norwegian (+ Bokmål & Nynorsk Norwegian), Portuguese, Rhaeto-Romance, Spanish, and Swedish.

x-heightThe height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.

Page 66: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationFontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein remain the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta ff Meta Serif ff Dingbats 2.0

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann's•TypoTips

TheRightFontfortheJob•

TypeAnatomy•

Page 67: Manual de Tipografia Fontshop

Erik Spiekermann’sTypo TipsSeven Rules for Better Typography

r

- –

— ÷

• • • •• • • •· · · ·· · · ·

Page 68: Manual de Tipografia Fontshop

1

www.fontshop.com toll free at 888 ff fonts 415.252.1003

Typo TipsSmall Caps

Ninety JPG fileson CD-ROM.

She sits AROUNDthe house!

Ninety jpg fileson cd-rom.

She sits aroundthe house!

better

betterrunning copy

emphasis

When you need to use capitals, for something like an acronym or abbreviation, use small caps.

Use italics for emphasis rather than all caps.

A CAPITAL MISTAKENEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

Aa

Page 69: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

2Typo TipsConnections

ConnectionsThere are three different ways to connect or separate words: the hyphen -, the en dash –, a little wider than the hyphen, and the em dash —, wider still. The regular hyphen is easily accessible on any Mac or PC keyboard, whereas the en dash needs the combination option-hyphen on the Mac. The em dash is accessed by pressing option-shift-hyphen on the Mac. The use of these dashes depends on house styles and tradition. The em dash with no space around it is traditionally used to separate thoughts—like this one—but I think its length is a distraction in running text. Try using the en dash to separate thoughts – like this one – with a character space on either side. En dashes without space on either side are also used between numbers and compound words as in: the shop is open 10–7, while you can take the New York–Kansas City train or the New York–Baltimore train only 8am–3pm.

open 10–3betteren dash

En dashes without spaces are used to separate numbers and compound words.

open 10-3betterem dash

Em dashes or, En dashes with spaces, are meant to sepa-rate thoughts.

How nice - to feel full - and still get full credit for appearing hungry.

How nice – to feel full – and still get full credit for appearing hungy.

– —

Page 70: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

3Typo Tips

“&”

“ & ”A dead giveaway for unprofessional “desktop typography” are wrong quotes and apostrophes. Quotes can have different shapes. They generally look like “this”, and can be remembered as beginning and ending quotes by thinking of “66” and “99”. Beginning quotes are found on the Mac by pressing option-[; closing quotes, option-shift-[. The apostrophe is simply a raised comma, the shape of a ’9 in most typefaces. It is identical to the closing single quote, while the open single quote looks like a ‘6. Beginning single quotes are found on the Mac by pressing option-]; the apostrophe and closing single quote, option-shift-].

better

When using quotes remember "66" and "99". Straight quotes are often caused by copying and pasting text, and a general lack of attention to detail.

real quotes

"hello" “hello”

Page 71: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

4Typo Tips

Figuring It Out

better

Figuring It OutGood text typefaces have “old style”, “text”, or “lowercase” figures – 1234567890 – instead of “lining” ones – 1234567890. Lowercase figures blend in better with the text settings, as the figures behave like lowercase letters with ascenders (6 and 8) and descenders (3, 4, 5, 7, 9) and x-height-only characters (1, 2, 0). While they fit in text very nicely, the good looks have one disadvantage: each of the figures have individual widths, meaning they won’t sit directly underneath each other in columns. Their descenders may also clash with ascenders when the columns sit closely on top of one another, as happens quite often in tabular settings. Most lining figures are "tabular", however, all the same width, making for a somewhat uneven appearance, as the 1 takes up the same space as the 8, but in tables, they are much easier to add up. Some fonts offer “tabular oldstyle figures”, which will allow table setting.

44

oldstyle figuresOldstyle figures blend better with text settings.

Without fail, now for 365 days straight, he rose and turned towards the sun.

tabular figuresLining figures are all the same width and appropriate for lists and tables.

Without fail, now for 365 days straight, he rose and turned towards the sun.

4129.8223.16

257.00

better

4129.8223.16

257.00

Page 72: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

5Typo Tips

Joining Forces

better

Joining ForcesA ligature is defined as the visual or formal combination of two or three letters into a single character. They consist of letter combinations such as ff, fi, fl, ffi. Ligatures keep letters from overlapping and improve legibility. For example: affluence, configure, deflate, affinity.

fl

ligaturesLigatures improve legibility by preventing overlapping characters.

affinitydiscretionary ligaturesDiscretionary ligatures are stylisitic and add character or flair to text setting. ffj gi sp it tt ck ee

affinity

Page 73: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

6Typo Tips

Not Justified

Not JustifiedAvoid flush settings! Most applications create justified text by hideously stretching and squishing words and spaces. Note that it takes many hours of tedious work to typeset justified text that is truly well-proportioned and legible. For this reason, professionals prefer to use ragged-right composition, either with or without hyphenation, depending on how much line-length variation they wish to allow. This gives the text a more harmonious appearance and makes it easier to read, since all wordspaces have the same width.

better

ƒ e u

alignmentAuto justified text often causes unsightly rivers in a block of text. Try flush right text instead.

The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that...

The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that...

Page 74: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

7Typo Tips

Bite The Bullet

Bite the BulletUse bullets or centered points instead of hyphens (-) when you list items. Bullets are part of the standard character set and are located in the following positions:

• option-8 (mac), alt+0149 (windows) · option-shift-9 (mac), alt+0183 (windows

better

· •

bulletsWhen setting lists use bullets rather than dashes. Bullets are part of the standard character set.

- Straight 3 miles

- Left at 22nd

- Soft right at Howard

- 300 feet to destination

• Straight 3 miles

• Left at 22nd

• Soft right at Howard

• 300 feet to destination

Page 75: Manual de Tipografia Fontshop

www.fontshop.com toll free at 888 ff fonts 415.252.1003

About FontShopFounded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.

FontShop EducationWithout training the best typefaces can only go so far. That’s why FontShop is more than a shop that sells fonts — we want to help you do great work too. Get more typography tips and tutorials at fontshop.com/education.

©2010 fsi FontShop International. All rights reserved. All Trademarks named herein re-main the property of their respective owners. The contents of this publication may not be repurposed or duplicated without express prior written permission.

Online Resources

FontShop.com•

FontFeed.com•

Spiekermann.com•

ColophonThis document is set in ff Meta Headline for titles, ff Meta Serif for text, and ff Unit for captions.

Further Reading

FontShopFundamentals2•Alternatives to Helvetica

ErikSpiekermann's•TypoTips

TypeGlossary•

TypeAnatomy•