This post discusses how the Internet affects typography, and why many traditional rules of typography do not apply on the web. It also explains why designers need to adapt to this new paradigm of graphic design, and methodologies that can be used to accommodate traditional typographic rules to the web.
FUNDAMENTAL RULES OF TRADITIONAL TYPOGRAPHY
In typographic literature, there seems to be some ambiguity of who came up with the quote that “the whole duty of typography, is to communicate, without loss, the thought or image intended to be communicated by the author.” It is, however, clear that this axiom has become the foundation of modern graphic design, guiding the work of some of our times most notable designers and typographic scholars including Rob Carter (Carter, Day and Meggs, 1985), Hermann Zapf (Zapf, 1987) and Paul Winckler (Winckler, 1978). The methods designers use to follow this maxim include carefully selecting typefaces from a particular period or era, and by using fonts with distinct visual expressions to help communicate the essence and nuances of the copy they are designing. Traditionally, designers also have utilised the output media to convey the connotation of text by, for example, using leather covers in book design to convey elegance or authority, and nonstandard formats and paper qualities.
To ensure that the connotation of a text is clearly communicated, easy to read and comprehended; professional production- and design of editorial content also have come to follow a standard set of rules—many of which are stated in typographic rulebooks such as The Chicago Manual of Style. Essential typographic rules include concepts such as orphans, widows, hyphenating text, letter-spacing, kerning, tracking, and the precept of the 45-75 character line-length. In addition to rules directly related to the connotation and legibility of text, graphic designers also have come to follow a number of methodologies to achieve design consistency, which includes using fixed grids and typographic scales as a base for their designs.
HOW WEB-PUBLISHING BREAKS TRADITIONAL RULES OF TYPOGRAPHY
In traditional typography with the size of columns and pages being fixed and pre-defined, manually fitting of copy to optimise the legibility of editorial content can be done fairly easy. Knowing the constraints and possibilities of the media in which a text will be published, allows the design to be based on fixed values; including pre-defined line-lengths and with grids- and font-sizes based on a fixed number of picas, points or millimetres.
With regard to internet publishing, where copy will be viewed on different screen-sizes ranging from mobile phones to massive home-video systems, designers, however, have no knowledge or control of the size of output media. The concept of a fixed line-length thus ceases to exist, resulting in manual copyfitting won’t be possible. In web-publishing, designers also cannot rely on a specific typeface to communicate the connotation of a text as of device disparities in typographic algorithms and font support (Barskar and Patidar, 2016). Even though all modern web-browsers now support the @font-face rule (Caniuse.com, n.d.) which enable designers to specify and distribute licenced fonts to be used by web-browsers when displaying a text, many e-book readers—including Amazon’s Kindle—still will display the text with a unique set of fonts for that particular device. Notably, this is also true for many bookmarking- and content aggregation apps- and services like Evernote, Pocket, Smart News and Feedly.
HOW TRADITIONAL RULES OF TYPOGRAPHY CAN BE ADAPTED TO THE WEB
As of the diverse ecosystem of output medias on the Internet; creating designs based on grids with fixed height- and width values leads to serious usability and legibility issues. Some of these problems include the need for immense scrolling if the text-area is larger than the device viewport, and readability issues if the text is designed for mobile displays but viewed on large computer screens. To solve this problem, designers working with the web, therefore, need to base grids on relative values such as EM’s, REM’s, and percent, instead of fixed values including millimetres and pixels.
Contrary to the belief of many web-designers, responsive design also does not automatically guarantee typography to be legible. In a relative grid adapting in size to the size of the output media, character lines will vary in length, and manual copyfitting in the traditional sense thereby won’t guarantee text to be legible. Cederholm and Marcotte (2010) discusses this and argue that the solution is to define min- and max-widths of paragraphs, images and other structural elements to prevent many of the most severe usability- and legibility problems for typography on the web; most notable issues with character lines becoming longer than the recommended 75-character line-length rule (The Chicago Manual of Style, 1993: p. 769; Bringhurst, 2012: p. 27) on large computer displays.
Cederholm and Marcotte are right in the sense that the definition of min- and max-widths will lead to better legibility. However; the visual appearance of text on the web still, to a large extent, will be subject to device-specific typographic algorithms. The definition of min- and max-widths, therefore, give no guarantee that the appearance of text will be displayed as defined by the designer.
With disparities in typographic algorithms and font support in web-connected devices, designers also cannot rely on a specific typeface to communicate the connotation of the text.
While devices supporting @font-face (W3schools.com, 2016) will display text in the typeface stated by the designer (Frain, 2012: p. 161-167), far from all e-readers and content aggregating apps support it. Designers, therefore, after defining the preferred @font-face fonts, also should define a set of preferred “web-safe” replacement fonts in descending order. Devices when rendering the text will then try to use the first alternative in the stack, and if this is not supported, continue with subsequent fonts before falling back to the standard font of the device if no supported font is found.
Lunn misses one important detail discussing the importance of font-stacks. When defining a font-stack, it is of vital importance that defined fonts have similar X-heights. Not taking the X-height in consideration when defining fonts of a font-stack can lead to complications if, for example, a text-area is not set to adapt to the height of its content. If the primary font in the stack is not supported, and the subsequent font has a larger X-height, what then can happen is that the text no longer fits in its designated area, and thereby might not get displayed in full.
According to Parskar and Patidar (2016), there is currently no universal solution to legible typography on the web because of inconsistencies in the rendering of text- and design in web-software and internet-connected devices. Their research show that designers, therefore, need to test their designs on different devices and browsers to make sure that both legibility and readability are device independent.
The problem with inconsistencies of text-rendering on the web also is discussed by Parker (2010) whose research has shown that the best current solution to ensure that design and editorial content published on the web is functional and legible, is to make sure that the production- and design of internet content follows web-standards. According to Parker, writing well-structured and semantic HTML will at least “deliver a functioning basic experience in any browser” (Parker, 2010: p. 3-6).
Traditional typography and editorial design for print is grounded on the maxim that “the whole duty of typography, is to communicate, without loss, the thought or image intended to be communicated by the author” (Carter, et al.). For this to be possible, though, the designer has to be able to control the presentation of design and content no matter media or output device which is currently not possible in web publishing as software developers are not bound to follow a standard set of typographic rules. This post has discussed methods to solve these and other problems related to web-typography and publishing content on the web.
- Afe.easia.columbia.edu. (n.d.). The Song Dynasty in China | Asia Topics in World History. [online] Available at: http://afe.easia.columbia.edu/song/tech/printing.htm [Accessed 18 Dec. 2016].
- Barskar, N. and Patidar, C. (2016). A Survey on Cross Browser Inconsistencies in Web Application. International Journal of Computer Applications, 137(4), pp.37-41.
- Bl.uk. (n.d.). Sacred Texts: Diamond Sutra. [online] Available at: http://www.bl.uk/onlinegallery/sacredtexts/diamondsutra.html [Accessed 11 Dec. 2016].
- Bringhurst, R. (2012). The elements of typographic style. 1st ed. Seattle, WA: Hartley & Marks.
- Caniuse.com. (n.d.). Can I use… Support tables for HTML5, CSS3, etc. [online] Available at: http://caniuse.com/#feat=fontface [Accessed 17 Dec. 2016].
- Carter, R., Day, B. and Meggs, P. (1985). Typographic design. 1st ed. New York: Van Nostrand Reinhold, p.348.
- Cederholm, D. and Marcotte, E. (2010). Handcrafted CSS. 1st ed. Berkeley, CA: New Riders.
- Craig, J., Scala, I. and Bevington, W. (2006). Designing with type. 1st ed. New York: Watson-Guptill Publications.
- DILLON, A. (1992). Reading from paper versus screens: a critical review of the empirical literature. Ergonomics, 35(10), pp.1297-1326.
- Dürer, A. (1538). Underweisung der Messung mit dem Zirckel und Richtscheyt in Linien ebnen und gantzen Corporen, durch Albrecht Dürer zusamen gezogen… Nun aber zu nutz allen Kunstliebhabenden in truck geben 1538…. 1st ed. [Gedruckt zu Nürenberg]: [durch Hieronymum Formschneyder].
- Evernote. (2016). Capture what’s on your mind. [online] Available at: http://www.evernote.com [Accessed 21 Dec. 2016].
- feedly. (2016). feedly: organize, read and share what matters to you.. [online] Available at: http://feedly.com [Accessed 21 Dec. 2016].
- Felici, J. (2003). The complete manual of typography. 1st ed. Berkeley, CA: Peachpit Press.
- Finkel, I. and Taylor, J. (2015). Cuneiform. 1st ed. The British Museum, p.7.
Frain, B. (2012). Responsive web design with HTML5 and CSS3. 1st ed. Birmingham: Packt Publishing Ltd.
- Getpocket.com. (2016). Pocket. [online] Available at: http://getpocket.com [Accessed 21 Dec. 2016].
- Jabr, F. (2013). The Reading Brain in the Digital Age: The Science of Paper versus Screens. [online] Scientific American. Available at: https://www.scientificamerican.com/article/reading-paper-screens/ [Accessed 1 Dec. 2016].
- Kent, T., Froke, P., Minthorn, D., Schwartz, J. and Acoca, S. (2016). AP STYLEBOOK. 1st ed. Associated Press.
- Lunn, I. (2012). CSS3 Foundations. 1st ed. Wiley.
- Mangen, A., Walgermo, B. and Brønnick, K. (2013). Reading linear texts on paper versus computer screen: Effects on reading comprehension. International Journal of Educational Research, 58, pp.61-68.
- Meggs, P. and Purvis, A. (2016). Meggs’ History of Graphic Design, 6th Edition. 1st ed. John Wiley & Sons.
- Nielsen, J. and Morkes, J. (1997). scannable, and objective: How to write for the web. [online] Nielsen, p.2. Available at: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.558.3130&rep=rep1&type=pdf [Accessed 1 Dec. 2016].
- Parker, T. (2010). Designing with progressive enhancement. 1st ed. Berkeley, CA: New Riders.
- Smartnews.com. (2016). Cite a Website – Cite This For Me. [online] Available at: http://smartnews.com [Accessed 21 Dec. 2016].
- The Chicago Manual of Style, S. (1994). The Chicago Manual of Style. 1st ed. Chicago, Ill.: University of Chicago Press.
- W3schools.com. (2015). CSS Web Safe Fonts. [online] Available at: http://www.w3schools.com/cssref/css_websafe_fonts.asp [Accessed 2 Dec. 2016].
- W3schools.com. (2016). CSS3 @font-face Rule. [online] Available at: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp [Accessed 2 Dec. 2016].
- W3schools.com. (2016). HTML Elements. [online] Available at: http://www.w3schools.com/html/html_elements.asp [Accessed 2 Dec. 2016].
- Winckler, P. (1978). Reader in the history of books and printing. 1st ed. Englewood, Colo.: Information Handling Services, p.348.
- Zapf, H. (1987). Hermann Zapf & his design philosophy. 1st ed. Chicago: Society of Typographic Arts.