Proper Text Composition for Print and Web

Text plays an important role in any design

Close-Up Of Text On Paper

Alex Reed / EyeEm / Getty Images

Text composition deals specifically with how text is entered and arranged on a printed page or a page designed to be viewed on the internet. It involves entering the text, manipulating its placement and altering its visual appearance.

Text composition goes hand-in-hand with page layout, in which you apply the principles of design to the placement of an interaction between text and images. Although text composition originally referred to print design, the application of styles in the use of HTML and CSS to format text for the web is also text composition.

Text Composition for Print Designs

Text can be entered in a word processing program and copied as needed or entered directly into page layout software. Wherever it is entered, formatting the text takes place in the page layout software. Some of the tasks that come into play in text formatting for print include:

  • Choosing a font — Thousands of serif and sans serif fonts are available to graphic designers, as well as many script and novelty fonts. Long text passages are usually more readable in a serif font, while sans serif fonts have a reputation for being more casual and modern. More is not necessarily better in fonts. Most designs benefit from using only one or two font families. Too many different fonts can cause a cluttered appearance.
  • Setting text alignmentAlignment refers to whether the text forms a straight edge at the left margin (flush left), at right margin (flush right) or at both margins (justified) or is centered. 
  • Choosing font sizes — Body copy should be easy to read. Usually, that calls for a font size of 12 or 14 points, although the optimal size varies with the font. Display text and headlines can be any size that works for the design. Large-size type draws the viewer's eye, so it is usually used on an important element of the design.
  • Making text bold or using italicsBold type and, to a lesser extent, italics add emphasis to text. Bold headlines are commonly used to grab attention. 
  • Adjusting how much space to put between lines of text, which is called leading — It can be increased or decreased to create the desired effect. Advanced spacing options include the ability to alter the spacing between individual sets of characters, between words, columns or between all the characters of a font.
  • Typographical embellishments — These can be drop caps and ornaments.
  • Widows and orphans The process of removing awkward line breaks from the text. 

Text Composition for Web Pages

While images receive most of the attention in a website design, text plays an important role too. Most of the same decisions and actions a graphic designer takes for the printed page apply to a web page, but how they are applied differs. Some of the advanced spacing adjustments are not achievable on web pages. The biggest challenge a web designer has is to design a page that looks the same on every viewer's computer.

Font Stacks — Web designers don't have as much control over the appearance of the type on their web pages as print designers have. Web designers may assign a single font to the body of the page. However, if the viewer doesn't have that font, a different font is substituted, which can completely change the look of the page. To get around this, web designers who work with Cascading Style Sheets assign a font stack to each page. A font stack lists the first preferred font and then as many preferred substitute fonts as are acceptable to the designer. The viewer's computer attempts to use the fonts in the order specified.

Web Safe Fonts — Web-safe fonts are a collection of standard fonts that are already loaded on most computers. Including web-safe fonts in a font, a stack is a safe backup that displays a web page the way the designer intended. The most common web-safe fonts include:

  • Arial and Arial Black
  • Tahoma
  • Trebucket MS
  • Verdana
  • Courier and Courier New
  • Georgia
  • Times and Times New Roman

Browser Safe Colors — Just as it is safest to use web-safe fonts, it makes sense to use browser-safe colors. There are 216 web-safe colors available to graphic designers.