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.
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.
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 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.
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.
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.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
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.
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.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
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.
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.Both pixels and points are static. However, points are based on a dots per inch (
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.
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, 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
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.
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.
max-width parameter to limit the width of text on big screens.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
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.
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.
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.
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.
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
CSS3 Fonts Module specification
CSS3 Web Fonts Module specification