Hello! Wonder no more about typography, it's fascinating mysteries, sensual shapes, and everything else you wanted to know about it; this book is about to reveal everything on the subject for you! Typography forms the base of a good written communication—it's an art form in itself, the art of drawing with words. While speaking you set the mood with tone and gesture, with writing nothing is more important than the words themselves and how they are portrayed.
You also need to know how readable your text is, therefore you have to set it up following some natural constraints our eyes and minds have built in, how white space influences your message, how every form should be taken into consideration in the writing of a text and this book will tell you exactly that!
Plus a little more!
You will also learn how to approach all of the above in today number one medium, the World Wide Web. Since 95 percent of the Web is made of typography, according to Oliver Reichenstein, it's only logical that if you want to approach the Web you surely need to understand it better.
Through this first chapter, you'll learn all the basics of typography and will be introduced to it core features, such as:
Note that typography, the art of drawing with words, is really ancient, as much as 3200 years prior to the appearance of Christ and the very first book on this matter is the splendid Manuale Tipografico from Giambattista Bodoni, which he self-published in 1818. Taking into consideration all the old data, and the new knowledge, everything started from back then and every rule that has been born in print is still valid today, even for the different medium that the Web is.
No software, no technology unless you're reading this book on a screen and even in that case, you're ready to go!
How good is that!
In this section, you will learn the terminology and structure of a letter. Knowing the what and where will make you a better writer and more importantly, a better reader. You'll start recognizing other people's mistakes, the world is full of them
The following points are the real foundation of writing, what lies beneath the splendid coherent surface of a text:
Serifs are the endings, non-structural decoration present on some typefaces. They can be bracketed with a supportive curved connection or un-bracketed, whereby a straight connection is made at ninety degrees.
After seeing each character on its own, lets look at the bigger picture:
Typefaces are made of multiple fonts, which are made of multiple characters.
As of today, whereas type is laid principally on screens and not on paper, this distinction practically merged the two terms into the generic font one. Old printing and typesetting machines used letters carved out of metal imposed on woodblocks that needed to be covered in ink and then pushed on paper, leaving a trace. For this reason, each letter was unique and had to be made from scratch, for each weight and style within the same typeface. While your font may have 512 glyphs that weigh a certain kilobytes, the original handmade version had 512 physical blocks, (one for each letter), that weighed kilos. Therefore, with so many objects around that needed to be ordered in some way and so the division between style set and the complete typeface was born.
In addition, the same story of moving blocks gave birth to almost every other typography related terminology that we use today, even in the digital age. They will be addressed later in this topic.
Serifs are referred to as such because of the small details that extend from the ending shapes of the characters; the origin of the word itself is obscure, various explanations have been given but none has been accepted as resolute.
Their origin can be traced back to the Latin alphabets of Roman times, probably because of the flares of the brush marks in corners, which were later chiseled in stone by the carvers.
They generally give better readability in print than on a screen, probably because of the better definition and evolution of the former in hundreds of years, while the latter technology is, on an evolutionary path, a newborn.
With the latest technologies and the high definition monitors that can rival the print definition, multiple scientific studies have been found inconclusive, showing that there is no discernible difference in readability between sans and serifs on the screen and as of today they are both used on the Web.
Within this general definition, there are multiples sub-families, as Old Style or Humanist.
Bodoni and Didot are certainly the most famous typefaces in this family.
They are divided into the following four sub-families:
They are commonly used for elevated and highly elegant designs and are certainly unusable for long body copy.
Almost all the aforementioned families are proportional in their style, (each character takes up space that is proportional to its width). This sub-family addresses each character width as the same, with narrower ones, such as i, just gain white space around them, sometimes resulting in weird appearances. Hence, Due to their nature and their spacing, they aren't advised as copy typefaces, since their mono spacing can bring unwanted visual imbalance to the text.
Recently even Blackletters (the very first fonts designed with the very first, physical printing machines) are being named under this category.
In conjunction with the division of typography families, it's also really important for every project, both in print and web, to know what they express and why.
It takes years of experience to understand those characteristics and the method to use them correctly; here we are just addressing a very basic distinction to help you start with.
Remember that in typography and type design, every curve conveys a different mood, so just be patient while studying and designing.
Serifs, through their decorations, their widths, and in and out of their every sub-family convey old and antique/traditional serious feelings, even when more modern ones are used; they certainly convey a more formal appearance.
On the other hand, sans serif are aimed at a more modern and up-to-date world, conveying technological advancement, rationality, usually but not always, and less of a human feeling. They're more mechanical and colder than a serif, unless the author voluntarily designed them to be more friendly than the standard ones.
Vladimir is elegant, refined, upper class looking, and expresses feelings such as respect. Arizonia on the other hand is not completely informal but is still a schizophrenic mess of strokes and a conclusion less expression of feeling; I'm not sure whether I feel amused or offended for its exaggerated confidentiality.
Since they are different in aspect from each other and the fact that there is no general rule that surrounds and defines the Display family, they can express the whole range of emotions. They can go from apathy to depression, from a complete childish involvement and joy to some suited, scary seriousness business feeling (the latter definition is usually expression of some monospaced typefaces).
Like every other typeface, more specifically here, every change in weight and style brings in a new sentiment to the table: use it in bold and your content will be strong, fierce; change it to a lighter italic and it will look like its moving, ready to exit from the page.
As such, they take years to master and we advice not to use them on your first web work, unless you are completely sure of what you are doing.
In the case of font color, what a script does and feel in the European culture can drastically change if the same is used for advertising in the Asian market.
Generally, it is said that you should use no more than two fonts in your design. It is a good rule; but let me explain it—or better—enlarge it.
While working with text for an informational text block, similar to the one you are reading now, stick to it. You will express enough contrast and interest while staying balanced and the reader will not get distracted. They will follow the flow and understand the hierarchy of what they are reading.
However, as a designer, while typesetting you're not always working on a pure text block: you could be working with words on a packaging or on the web.
However, if you know enough about typography and your eyes are well trained (usually after years of visual research and of designing with attention) you can break the rules. You get energy only when mixing contrasting fonts, so why not add a third one to bring in a better balance between the two?
As a rule, you can combine fonts when:
They are not in the same classification. You mix fonts to add contrast and energy and to inject interest and readability in your document and this is why the clash between serif and sans has been proven timeless. Working with two serifs/sans together instead works only with extensive trial and error and you should choose two fonts that carry enough differences.
You can usually combine different subfamilies, for example a slab serif with a modern one or a geometric sans with a grotesque.
If your scope is readability, find the same structure. A similar height and similar width works easily when choosing two classifications; but if your scope is aesthetic for small portions of text, you can try completely different structures, such as a slab serif with a geometric sans. You will see that sometimes it does the job!
Go extreme! This requires more experience to balance it out, but if you're working with display or script typefaces, it's almost impossible to find something similar without being boring or unreadable. Try to mix them with more simplistic typefaces if the starting point has a lot of decorations; you won't regret the trial!
The word originates from the Latin word cardo meaning hinge. When letters were made of metal on wooden blocks, parts of them were built to hang off the base, thus giving space for the next character to sit closer.
Tracking is also as called letter-spacing and it is concerned with the entire word—not single characters or the whole text block—to change the density and texture in a text and to affect its readability.
Tracking request careful settings: too much white space and the words won't appear as single coherent blocks anymore – reduce the white space between the letters drastically and the letters themselves won't be readable.
As a rule, you want your lines of text to be made of 50 to 75 characters, including dots and spaces, to achieve better readability. Some will ask you to stop your typing as soon as approximately 39 characters are reached, but I tend to differ.
According to kerning, especially on serifs, two or three character can clash together. Ligatures are born to avoid this; they are stylistic characters that combine two or three letters into one letter:
Standard ligatures are naturally and functionally the most common ones and are made between fi, fl, and other letters when placed next to an f. They should be used, as they tend to make the script more legible.
Discretionary ligatures are not functional, they just serve a decorative purpose. They are commonly found and designed between Th and st; as mentioned previously, you should use them at your discretion.
Leading is the space between the baselines of your text, while line-height adds to the notions and also to the height of ascenders and descenders. The name came to be because in the ancient times, stripes of lead were used to add white space between two lines of text.
There are many rules in typesetting (none of which came out as a perfect winner) and everything changes according to the typeface you're using.
Mechanical print tends to add 2 points to the current measure being used, while a basic rule for digital is to scale the line-spacing as much as 120 percent of your x-height, which is called single spacing.
As a rule of thumb, scale in between 120 and 180 percent and you are good to go (of course with the latter being used for typefaces with a major x-height). Just remember, the descenders should never touch the next line ascenders, otherwise the eye will perceive the text as crumpled and you will have difficulties to understand where one line ends and the other start.
This is important in a text because it helps the reader understand the order of the text, what's more important, what's regular text, what requires attention, and also with the use of descriptive titles it helps him skip entire parts of the text that are of no specific interest.
To achieve the aspect of a title and of a sub-title, different sizes and weights are used between the two parts. We generally prefer to triple the dimension of the actual text and go with the corresponding leading directly above it; if a subtitle is present, leading can be adjusted from 100 to 110 percent.
It depends on your culture and whom your text is aimed to. It also depends on the general aesthetic that you're trying to achieve and usually compromises between the two needs to be fulfilled.
Scientifically speaking, centrally aligned text is the weakest from a readability point of view: your eye can't find a consistent starting and stopping point. So, every passage will automatically adjust every new line in an instant; it's a subtle but catastrophic step, since the focus will be shifted from the word to the general picture. People tend to be easily distracted when reading a text that is centrally aligned.
So, both left and right edges are good for typesetting; it depends on your language and aesthetics.
A good rag goes in and out from the margin in small increments; while a bad, distracting one creates distracting shapes.
It deserves a separate paragraph from the alignments, since every feature and every defect can be made visible with an aligned text; when the same text is justified, it tends to be exaggerated. It can be full, left, right, or centered with the terms referring to the alignment of the last line of text.
It's a common type of text alignment in print, where the spaces between words are stretched or compressed to align the left and right edges of the text equally.
This commonly gives birth to various issues, as a loose line where the space is just too much, or a tight one, where the text is too crumpled.
The centered one especially gives birth to rivers, which are gaps in the text that appear to run almost vertically and are bad for readability, since they distract the eye.
One good test for you to discover rivers in your typesetting is to take the paper or the text and rotate it by 180 degrees, turning it upside down.
Doing so will make the words and text less easy to be recognized by the brain, which will now concentrate more on the actual shape of your paragraph, instead of its meaning, which will allow you to see them better.
The preceding text covers the basics of typography, which you should study and know in order to make the text in your assignment flow better.
Now, you have a greater understanding of typography: what it is; what it's made of; what are its characteristics; what the brain search for and process in a text; the lengths it will go to understand it; and the alignments, spacing, and other issues that revolve around this beautiful subject.
The most important rule to remember is that text is used to express something. It may be an informative reading, may be the expression of a feeling, such as a poem, or it can be something to make you feel something specifically.
Every text has a feeling, every text has an inner tone of voice that can be expressed visually through typography. Usually it's the text itself that dictates its feeling – and help you decide which and how to express it.
All the preceding rules, properties, and knowledge are means for you to express it and there's a large range of properties on the Web for you to use them. There is almost as much variety available in print with properties for leading, kerning, tracking, and typographical hierarchy all built in your browsers.
We'll start to explore them in the upcoming chapters.