How the internet is changing the rules of typography and why designers need to adapt to this new paradigm in graphic design.

One of the most important roles of graphic designers working on editorial projects such as books, articles and magazines have been to reflect the connotation of the text in the design of its output media. This process has included carefully selecting typefaces, paper quality and format; in addition to the implementation of strict typographic rules, many originating as far back as the 16th and 17th century when it was known to the designer how the text would be consumed and in which media. With the birth of the Internet and the diverse and growing ecosystem of devices connected to it with various screen sizes and idiosyncrasies in typographic algorithms and author font support, many traditional typographic rules no longer are applicable.

This article will discuss 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 in graphic design and methodologies that can be used to accommodate traditional typographic rules to the web environment.

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 come to be 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 way designers have come to follow this maxim includes carefully selecting typefaces from a particular period or era and by using fonts with a distinct visual expression to help communicate the meaning of the text. Traditionally designers also have utilised the output media as a way to convey the connotation of the editorial content by using leather covers in book design to communicate elegance or authority, and nonstandard formats and paper qualities as a way of express individualism and uniqueness.

To make sure that the connotation of text is clearly communicated, easy to read and comprehend; professional production and design of editorial content also have come to follow a standard set of rules, many 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 the 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.

TYPOGRAPHY ON THE INTERNET AND HOW WEB PUBLISHING BREAKS MANY TRADITIONAL RULES OF TYPOGRAPHY

In traditional typography with the size of columns and pages defined, manually copyfitting can be performed to optimise the legibility of editorial content. Knowing the constraints and possibilities of the media in which text content will be published and consumed, allows the design to be based on fixed values such as set line lengths and with grids and font-sizes based on a specified number of picas, points or millimetres.

With regard to the internet with its connected ecosystem of devices with diverse technological capabilities and screen sizes ranging from small mobile phones to massive home video systems, the designer no longer has knowledge or control of the output media. The concept of a set line-length thus ceases to exist, resulting in manual copyfitting will be of no value for the legibility of the text. In editorial web publishing designers also can not rely on the typeface to communicate the connotation of the 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.) enabling designers to specify and distribute licenced fonts to be used by web browsers; many e-book readers, including Amazon’s Kindle, still will use pre-set fonts to display text content. 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 lead 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 consumed 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 like millimetres and pixels. By doing so grids and the elements based on them will adapt in size to the viewport of the output device.

Responsive design in itself, though; does not automatically lead to legible typography on the web. In a relative grid, character lines will vary in length and manual copyfitting in the traditional sense, thereby, will be of no value for the legibility of the text. Cederholm and Marcotte (2010) discusses this matter and argues 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 to occur; most notable issues with character lines becoming considerably 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 and the definition of min- and max-widths, therefore, will not give designers full control of the appearance of the text and consequently is no guarantee that the text will be displayed optimally.

With disparities in typographic algorithms and font support in web-connected devices, designers also can not rely on the typeface to communicate the connotation of the text. Devices supporting the so-called @font-face rule (W3schools.com, 2016) will display text in the typeface stated by the designer (Frain, 2012: p. 161-167), but far from all e-readers and content aggregating apps support it. According to Lunn (2012) designers, therefore, in a CSS file with the most preferred font first followed by web-safe replacement fonts in descending order, should build a so-called ‘font-stack’. A web device 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 building a font-stack, it is of vital importance that the selected fonts have similar x-heights. Not taking the x-height in consideration when building font-stacks can lead to some serious 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 due to inconsistencies in the rendering of text- and design in web-software and internet-connected devices. Their research has shown that designers, therefore, need to test their work on different devices and browsers; to make sure that the legibility is device independent. The problem with rendering inconsistencies 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 fully functioning basic experience in any browser” (Parker, 2010: p. 3-6).

As there is currently no universal solution to legibility of content on the web, Parker’s web-standards approach seems to be the best current answer for creating device-independent typography and design on the internet. Designing by web standards does not guarantee that design and typography are rendered exactly as intended by the author, but at least that the content is functional and legible. With a market moving rapidly from print to the web in almost all design disciplines, it is, therefore, necessary that designers on today’s market gain an understanding of how to create designs that conform to these standards and, consequently, learn at least the basics in how to read and write web code.

CONCLUSION

This essay has discussed how designers working with the internet as a publishing platform; by using relative values instead of fixed for structural elements such as grids, by following web standards and by defining a well thought out font-stack; can solve many functional- and legibility issues that comes with design and typography on the internet. To fully understand the limitations and possibilities that accompany web publishing, it is also vital that designers and authors test their work on different devices and platforms. With a market moving rapidly from print to the web in almost all design disciplines, it is, therefore, necessary that designers gain an understanding of how to create designs that conform to the rules of the web and learn at least the basics in how to read and write web code.

FUTURE INVESTIGATION

Traditional typography and editorial production for print has come to follow a strict set of typographic rules stated in typographic rulebooks such as The Chicago Manual of Style (1994) and Kent (2016), and 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. This currently is not possible in web publishing as software developers are not bound to follow a standard set of typographic rules, leading to today’s inconsistencies in the presentation of editorial content and design on the web. Future research on the topic of web-typography should, therefore, converge on the possibility of building a universal set of web-related typographic rules and also ways of making them readily available and used by software developers, designers and writers working with design and typography on the web.

Bibliography

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.