Login or Register

Issue 1 → Typography Is Important

  1. Typography Is Important

    March 11, 2010
    by Vasily Vasinov

    Typography is the art of arranging type and type design. 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) and between pairs of letters (kerning). Typography comes from the Greek words typos, which means “mark, figure” and grapho, which means “I write.” It is basically the discipline of shaping written information; thus it can be applied to anything which has to do with text, including web design. Authors write the text, designers and typographers manage the typography, and users read through it.

    An Important Statement

    Emil Ruder, a famous Swiss typographer, wrote this statement in 1969 which is applicable to the web:

    “Today we are inundated with such an immense flood of printed matter that the value of individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.”

    It is true—there are millions of websites on the web today that all have information on them represented with text. In most cases, authors do not care how their information is laid out; sometimes they do, which is even worse because of their lack of education in the matter. There are hundreds of websites with yellow text on a purple background with awfully proportioned text in a ridiculous typeface—this should not be the case in the decade of the semantic web, where great tools are easily accessible to designers and developers. The purpose of this article is to impart an understanding of web typography to beginner typographers and designers in order for them to do web design well.

    One might ask, “Why should I be kept under typographic constraints and not be able to express myself as I want?” The answer is simple: we, as human beings, always have to follow some rules that make it possible to coexist. For example, imagine yourself driving a car without any rules. Now imagine that everybody else starts driving without rules too. This would result in chaos, a lot of accidents, and the collapse of the whole system. The same applies to the representation of texts and the creation of websites: you have to follow some rules that are based on human visual perception. Otherwise, there will be textual chaos in any type of media that includes written words.

    Typography and the Web

    Just as lithography replaced the printing press in the seventeenth century, HTML is replacing digital printing today. HTML is a powerful technology that allowed the Internet to become the global mass medium it is today. It also made it easier for authors to edit their texts, providing an ultimate weapon to destroy text readability and beauty. However, for knowledgeable people like typographers, modern HTML provides a full set of tools to make texts look beautiful, eye-pleasing, and informative.

    common mistake
    Thinking that typography and the web are incompatible.
    The web is a medium where typography rules are applied in order to create a readable, coherent, and visually satisfying whole that engages the reader without their knowing. The limited choice of fonts on the web should not be a typographer’s major concern—he should use what is available and make the most out of it, all the while keeping in mind that readers do care about how the text is represented. They might not care about the typography itself, but they definitely care about getting the right information quickly.

    viva italian renaissance
    This spread uses just one typeface yet still creates a beautiful interface for the reader.

    Peter Sheerin wrote in his article nine years ago that “The dawn of the web has frequently been compared to the invention of the printing press. But the web has also destroyed one of the greatest features of nearly every press since Gutenberg: The ability to publish pleasing type.” Sheerin is referring to older versions of HTML and CSS that used to lack adequate font controls for relative sizing and spacing, correct punctuation symbols, and the like. Modern versions, however, have support for a lot of features (still not all of them!) that make great typography, but authors and designers have formed bad habits by making websites using older formats and standards. This has got to change.

    The first tip for web typographers and authors who are editing their texts is to never experiment with colors and text dimensions. It is hard to come up with a nice color scheme on your own, especially with no experience. That is why it is a good idea to start with a white background and black text on top—this is a successful time-tested technique. After the scheme is chosen, it is time to think about the actual text—its structure, spacing, and punctuation.

    Text Structure

    Text has more integrity and wholeness than the elements that surround it, from titles and captions to images and forms. In digital media such as the Web, text is usually split into chunks that can be addressed by search engines and links. It is always a good idea to have a series of articles or a chapter-structured book split into several pages, but it is a horrible idea to split one long article or a blog post into several pages. It is annoying and only benefits ad owners who get more views of their ads.

    The actual text on the page—the flow of words—is usually broken up into pieces that offer alternative routes through masses of information. To help users navigate through the content on the web, designers use headings and paragraphs to set a hierarchy of information, links, and other tools that transform a chunk of text into pleasurable interface.

    Web Pages ≠ Newspapers
    The New Yorker magazine’s web designers treat the text as if it was a newspaper, resulting in a complete mess. It is hard for readers to recognize links and the general structure of the site.
    Hypertext links are essential parts of the web that make it much easier for a user to navigate through pages. Since the beginning of the Internet era, links have been represented with an underlined word or several words in a different color. Nowadays authors who do not treat text as an interface, but instead as a creation of their minds, sometimes do not underline links or make them noticeable. That is not acceptable because links that are not presented properly don't fulfill their purpose. The rule for links is to always underline them and make them a different color, unless they are buttons. Buttons are different because they are used to submit information and are usually recognized by web users. Menu entries of all sorts do have to be underlined, since they are clearly links to other pages.

    Paragraphs are a literary convention designed to divide text into portions that make more sense to a user. In the seventeenth century, people started to mark the beginning of each paragraph with an indent and mark its close with a line break. Before that, some typographers would add extra space between paragraphs or sentences. Despite the domination of the indent or line break convention today, a lot of alternatives can be used in its place. Block quotations are special kinds of paragraphs that create a visual distinction between the main text and the quotation. The best way to do it is to add a padding on the left of a block quotation; right padding can be added as well if the text has justified alignment.

    kinds of paragraphs
    Typographers can choose to use conventional paragraph formats, come up with their own, or combine several different ones. The best type of paragraph formatting to use on the web is the one with a space between paragraphs equal to the line height of the text; this makes it a lot more clear where a paragraph breaks, since there could be other visual elements, like indents, on the site that make it harder to see the end of a paragraph (this is how paragraphs are usually represented in books). Two other paragraph formatting options could be putting a symbol at the end of each paragraph with no line break, or using an outdent.

    common mistake
    Two spaces instead of one space between sentences.
    In the nineteenth century, writers were encouraged to add one space between sentences. Twentieth century typists were taught to press the spacebar twice at the end of every sentence. In modern typesetting, only one space should be left between sentences because that is how typographers designed the typefaces in order to enhance the beauty of the text. Adding extra spaces ruins the harmonic flow of the text. Thankfully, all white space in HTML, in any combination of spaces, is automatically collapsed into a single word space. One space between sentences, or French spacing, is the current convention in countries that use the modern Latin alphabet; two spaces between sentences, or English spacing, is the historical American typing convention which is no longer used in modern media.

    Alignment is the setting of text placement relative to either or both edges of the text. The edges of the text can be hard, when the text is aligned on the margin, or soft when the text is uneven and not aligned. Alignment can be justified, flush left or right, or centered. Justified alignment (when the left and right edges are both even) is good to use to make a figure or shape on the page. It is especially useful in newspaper or book design when the text normally occupies the whole page and has to use space efficiently. Flush left alignment (when the left edge is hard and the right edge is soft) is used by designers who want the text to flow organically without introducing possible uneven spacing between words which can appear in justified alignment; that is why on the web text should be flush left, which is a default setting in most browsers, unless a designer wants every element on the website, including text, to be a part of a strictly defined grid. Flush right alignment can be good for captions, marginal notes, or sidebars. It should never be used with normal text because it makes it harder to read, unless the text is in Arabic or Hebrew, which reads right-to-left. Centered alignment can be used for titles, songs, or poems, but never with normal text because it's also difficult to read. In CSS, the text-align parameter with values justify, left, right, and center should be used in order to align text on the page. If the text is flush left or right, then the space between words should stay fixed. However, if the text is justified, then the word space must be elastic and set in ems (the em unit is discussed below). Also, the word-spacing property should be increased for boldface and can be decreased for large headings when the letterfit is tightened, unless the heading used all capitals or small caps.

    roman type
    This has two meanings in typography: The “regular” (upright) counterpart of an italic typeface and one of the major families of traditional typefaces, also known as serif typefaces. Serifs are small details on the ends of some of the strokes that make up letters.
    In order to distinguish a title, show a foreign word, use a word as an example of a word rather than for its semantic content, or introduce and define a new term, italic type should be used. Italic type is a cursive form of a typeface based on a stylized form of calligraphic handwriting. Italic type was first designed in Italy and used in medieval writing offices (chanceries). Most typefaces have a cursive form which should be used instead of oblique type. This is a form of type that slants slightly to the right, just like italic type, but uses the same glyphs as roman type, except distorted. Oblique type is also known as fake italics. It is important to be careful while setting the font-style property in CSS for cursive—it has to be set to italic and not oblique, which would make the Roman type look ugly.

    Italic type can be used to emphasize something in the text while the text is being read. Boldface is used to emphasize keywords the reader might be looking for. Boldface is usually written or printed with thick, strong lines to attract the human eye. For web designers, it is important not to overbold text, which would defeat the purpose of boldface. Also, a true bold form of a typeface should be used, as opposed to just thickening the original letters, which looks chunky and unprofessional. Most typefaces that are common on the web have various bold forms that make it easy for a designer to play around with the font-weight property. The value of 400 for this property is considered to be the normal form and 700 the bold form. The values in between are semi-bold and 800 or 900  are thicker than regular bold. It is better to use bold or semi-bold form on websites since they are the best for various screen resolutions.

    Small capitals (or small caps) are capital letters set as the same height and weight as small letters. They are usually used in titles and subtitles to replace all letters in the old font variant or to prevent capitalized words, such as abbreviations, from appearing too large in the text. They can also be used to draw attention to a new section of text. It is important to use true small caps that retain the same stroke weight as other letters and a wider aspect ration. Pseudo small caps are just shrunken versions of normal caps, which does not benefit readability at all. On the web, the font-variant property with small-caps parameter should be used in order to set up small caps for a desired piece of text. In titles and headings that are not fully small capped, normal capitals should be used in the place of capitalized words.

    Spacing and Sizes

    Text is an interface to the information, while typography is an interface to the alphabet. Since text consists of letters, it is important to apply typography rules to them in a way that makes it easy for a reader to understand information. On the web, a typographer has to understand that text might be viewed on different screens and in different resolutions; that is why it is important not to specify sizes statically (in pixels or points). Instead, em units should be used for font dimensions and sizes of elements and between elements. The em is the true typographic unit and acts as a multiplier based on the next element’s parent unit. It was recommended by the W3C to be used in style sheets in order to make sites scalable.

    points, inches, and ems
    A point is the smallest unit of measure. There are 72 points in one inch, which makes one point 0.353 millimeters. There are 12 points in one pica and 16 points in one em (in a 16 point typeface).
    Both pixels and points are static. However, points are based on a dots per inch (DPI) value, which is why a text size set in points will have more pixels on paper than on screen, since text printed on paper has a higher DPI. Pixels and DPI relate to each other differently. Imagine a computer screen with a width of 20 inches and a horizontal resolution of 1200 pixels: What will an image of 100 pixels wide look on this screen? It will be about 1.7 inches long (1200 pixels (dots) ⁄ 20 inches = 60 DPI; 100 pixels (dots) ⁄ 60 DPI ≅ 1.7 inches). If you print it with the DPI set to 72, which is a standard DPI for printing pictures, you will get an image of 1.4 inches long. An image gets shorter on paper if its size is set in pixels as opposed to points. In order to convert size in pixels to points, one should multiply the size of the typeface in pixels by 72 points and divide it by 72 pixels per inch (PPI) on a Mac or 96 PPI in Windows in order to get a proper value in points.  

    The em unit defines the proportion of the letter width and height with respect to the point size of the font (each typeface has its own default size). Originally the em unit for every typeface was derived from the width of the capital “M” in that particular typeface. However, in modern typefaces the capital “M” is usually smaller than one em. That is why today an em normally means the height of capital letters in a typeface. In order to convert size of the font in pixels to ems, one should divide the size of the typeface in pixels by the size of the font in the parent container in order to obtain a value in ems.

    Before working on a website, it is a good idea to select an appropriate scale for the text. Traditionally, text in the body of any HTML document has the size of 16 pixels (it is just the way a browser renders pages), which might be too big for some typefaces. Let’s take Georgia typeface as an example and make changes to its default sizes in order to produce an elegant set of textual elements. Text in paragraphs should be reset to a more appropriate size of 12 pixels. Since web designers should not be using static units, such is pixels, for sizes, ems have to be used instead. To change the units, a designer should take the desired size of the paragraph (12 pixels) and divide it by the text size of the body (16 pixels) to get a value of 0.75 em. This is the value of the font-size property that paragraphs should have. The same applies to different sizes of headings. Classical sizes for them are 14 pixels for H4 heading, 18 pixels for H3, 24 pixels for H2, and 36 pixels for H1. The same transformation should be applied to these headings as to a paragraph resulting in em sizes of 0.875, 1.125, 1.5, and 2.25 respectively. Designers are free to devise new scales but they have to limit themselves to a modest set of distinct and related intervals.

    common mistakes
    Adding extra space between lower-case letters and not adding space between capitals, small caps, and digits.
    Tracking, also known as letter spacing, is the overall spacing between letters in a block of text. Tracking should never be applied to lower case letters because it hampers legibility. However, tracking should be applied to capitals, small caps, and digits—it is essential for rapid reading of long strings, such as titles, or strings that are not quite meaningful at the first glance, such as abbreviations or long numbers. Tracking of 5% to 10% of the original text size should be applied to the appropriate combinations of letters. It is really easy to set tracking in CSS by using a value of 0.1em  for the letter-spacing property which corresponds to 10% of the font size. Tracking is often confused with kerning, which refers to the adjustment of spacing between two particular characters that have visually uneven spacing. For example, the letters “W” and “a” in the word “Washington” can be placed closer together to eliminate a disproportional gap between them.

    Tracking and Kerning
    Tracking and kerning are two different things. If kerning is applied to text, it has to be done consistently, illuminating gaps between letters that have diagonal elements, and making all letters visually be set apart at the same distance.

    For web designers it is huge pain to apply kerning rules, since HTML does not have a good mechanism for that. Candidate recommendation for CSS3 text module has a kerning-mode parameter which is not yet supported by any major browsers. As of today, web designers should kern big titles and headings by wrapping <span> tags around target letters and changing its letter-spacing for letters to have a visually even amount of space in between them.

    Leading is the amount of added vertical spacing between lines of text. Authors often call it line spacing because it is an easier term to understand and memorize. The word leading comes from the times when mechanical presses were used in typography and strips of lead were placed between lines of type to space them apart. Text with no leading is hard to read as well as text with very large leading. Typical leading set to a block of text is 50%. This means that for a font size of 12 pixels, there will be 3 pixels that are added on the top and on the bottom of each line, resulting in the line height of 18 pixels (12 pixels + (2 ∗ 3 pixels)). On the web, it's a good idea to set leading to 70% to 80%, but never exceed 100% because it causes problems with readability. Web designers should never set the line-height property of the text to absolute values in pixels or ems. Instead, a multiplier value should be used. If a multiplier value is set then a browser takes the size of the font and multiplies it by the line height multiplier value which results in an appropriate line height. For example, if the font size is 0.75 em and the multiplier is 1.7 (it corresponds to 70%), then the line height will be 1.275 ems.

    The Grid
    An awesome Syncotype tool helps in aligning the text to a baseline grid. In their demo, the line height is set to 18 pixels. Each element has a line height or actual height equal to 18 pixels or the product of 18 and a number (e.g. 36 pixels).
    Paragraphs, headings, images, sidenotes, and blocks of quotations break the base rhythm of well-leaded lines that make up an evenly spaced grid. This adds life to the text, but these additions should really be well phased in order to keep the harmony of a page. The most common spacing that occurs in text is between paragraphs and should be related to the basic leading. For example, if the line height is 1.275 ems, then the space between paragraphs should be 1.275 ems as well. Headings can be smaller or greater than one line height (normally not greater than two line heights), but its vertical spacing should still be related to the basic leading. For example, if the heading is 24 pixels and the line height of the normal text is 18 pixels, then the line height of the heading will be 36 pixels (6 pixels should be added on the top and on the bottom of the heading). Subheadings are similar, except for they usually do not exceed one line in height. Headings and subheadings can have an extra space on top equal to one half of the line height. In this case, the top margin will be equal to 3⁄2 of a line height, and the bottom margin to one line height. This is especially useful on the web because pages can be very long; the headings that are closer to the related text can be associated with that text more easily by the reader. Sidenotes are usually set at a smaller size to the main text. This smaller text should still line up with the main text (be part of the grid). That is why its line height should be increased.

    common mistake
    Stretching a block of text to the full length of the page.
    For single column text, the 66-character line is considered to be ideal, with 75 characters as the maximum where readers feel comfortable reading and switching lines). For multiple column text, 40 to 50 characters is good. On a page with a fixed width, designers should set the width of the blocks of text to meet the 66 character per line goal. For liquid pages that stretch based on the size of the browser window, the text block width can be set to a static value as well, or it can also be fluid. In this case, the designer should see how it behaves on screens with higher resolutions and be smart by setting up widths in percents (not let a text block be “wider” than 75 characters) or by using the max-width parameter to limit the width of text on big screens.

    Punctuation

    Punctuation marks are symbols that indicate the structure and organization of text, as well as intonation and pauses to be observed when reading aloud. It is easy to mess up punctuation on the web, since text represented with HTML is mostly written in code editors that do not have advanced controls for punctuation; this leaves an author with a keyboard that has a very limited number of characters to use while editing text.

    One of the cornerstones of punctuation is quotation marks. Back in the day, to save money on keyboards, typewriters were supplied with one straight quote that was subsequently inherited by a computer keyboard. As a result, the overwhelming majority of printed products and websites worldwide do not have correct quotes, primes and double primes, ditto marks, and apostrophes.

    Like brackets, quotation marks (“ ”) may be either opening or closing. In whatever font you choose, the way a quote is printed will tell you what kind of a quote it is, even beyond its context. Depending on the typeface, opening and closing quotation marks may be identical in form (" "); if this is the case, then they are called straight, or vertical. On a keyboard, default quotes are usually straight quotes, even though most typefaces do have real curly quotes. As mentioned earlier, this happened because typewriters had only button with straight quotes and computer keyboards, primarily used by programmers, adopted this feature to delimit strings or literal characters. However, modern computers supply authors, editors, and designers with more options.

    In correct typography, straight quotes can only be used in programming or in a typeface that has them as regular quotes; otherwise curly quotes should be used to set off written speech, a quotation, a phrase, or a word.

    The apostrophe (’) is different from the closing single quotation mark, but in a lot of typefaces it looks the same (whether it is the curly or the straight one). It is also different from the prime mark (′), which is used to indicate measurement in feet or arcminutes. The double prime mark (″), which is used to represent inches and arcseconds, is different from the closing double quote as well.

    The ditto mark (?) is a symbol indicating that the word or several words below which it is placed are to be repeated.

    quote-like symbols
    Quotes, primes, apostrophes, etc. in Georgia typeface. Georgia is designed for clarity on a computer monitor even at small sizes, partially effective due to a large x-height.

    common mistakes
    Using two hyphens (--) instead of the em dash, a hyphen between numbers, or an en dash in a hyphenated word.
    Another important punctuation mark that is usually used incorrectly on the web is the dash. The look of it is similar to a hyphen (-), but it is longer and should be used differently. The most common versions of the dash are the en dash (–), the em dash (—), and the figure dash (?). The en dash is used to express ranges (for example 1988–2010) and is normally a little shorter than the em dash, which is commonly used for demarcating a parenthetical thought or some similar interpolation. The figure dash is the same width as a digit and is used as a dash within numbers. It does not indicate that it is similar to the en dash (since it is used in ranges) or the minus sign (since it is the same length as a digit). Only a few typefaces offer the figure dash, so if you are using a typeface without it, a hyphen-minus should be used.

    A hyphen, formally called a hyphen-minus, is used to join words and to separate syllables of a single word. It is a symbol that every keyboard has and which is used as a minus sign in programming and mathematics, even though a typographical minus (−) is different. As always, it is a typographer’s job to fix incorrect usage of dash-like symbols in information design of a website.

    dash-like symbols
    Dashes, a minus sign, and a hyphen in Georgia typeface. Look at how the em dash is the same width as the letter “M”, which is a base of an em unit. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

    common mistake
    Using a slash (/) instead of a solidus (⁄) to represent ratios and fractions.
    Two symbols that are often confused are the slash (/) and the solidus (⁄). The slash is commonly called a forward slash to distinguish it from the backslash (\). The most common use of the slash is to replace the hyphen or en dash to emphasize a strong juncture between words or phrases. It is used to represent the logical “or”; today it is also commonly used for “and”. The forward slash can also represent abbreviations such as “w/” for with. The solidus, or shilling mark, is used to denote shillings from pounds and pence or to display ratios and fractions in math.

    An ellipsis (…) is a symbol that consists of three periods. According to the Modern Language Association standards, there should be a space between each period (. . .), but some modern typographers argue that it is another Victorian eccentricity and that spacing should depend on the character and the size of the font. On the web, it is better to use an ellipsis without full spaces in between. Instead, thin spaces should be used that have a width of about one-fifth of an em unit. Thankfully, there is a predefined character entity in HTML reference to the ellipses with no full spaces.

    usage of an ellipsis
    Normally, an ellipsis should have spaces surrounding it on both sides to separate it from the text, but with extra punctuation marks the leading space disappears.

    One of the things that only true professionals know about typography is hanging punctuation—the result of typesetting punctuation marks and bullet points so that they do not disrupt the “flow” of a body of text or break the margin of alignment. Punctuation marks, left parentheses, hyphens, dashes, etc. are lighter in weight when you compare them to characters, which is why they have to be put into the left margin of a page. On the right, quotation marks, right parentheses, periods, hyphens, and commas should be put into the right margin if the text is justified. Dashes should only be put one half or one third of their length into the right margin. It is hard to implement hanging punctuation on websites in all possible places, but in newspapers, magazines, books, and large chunks of text, punctuation must be hung in captions. W3C Working Draft for CSS Text Level 3 has a hanging-punctuation parameter which is not yet supported by any major browsers. Without solid CSS support, it is hard to implement hanging punctuation in normal texts, but in captions and titles it should be hung. Also, web designers should hang quotes in block quotations by setting the text-indent property for a block of text that has a quote symbol at the beginning to -0.5em.

    hanging punctuation
    Here is an example of hanging punctuation applied to the justified text. The punctuation “hangs” in the margin of the text, making it seem like a body of text is not broken.

    Bibliography

    Thinking With Type book by Ellen Lupton

    The Elements of Typographic Style book by Robert Bringhurst

    Typographie book by Emil Ruder

    I Love Typography blog

    How to Size Text in CSS article by Richard Rutter

    Em Calculator tool

    HTML 4.01 specification

    XHTML 1.0 specification

    CSS2.1 specification

    CSS3 Fonts Module specification

    CSS3 Web Fonts Module specification