Table 9.1 Sectioning markup for web typographyĪpplication, banner, complementary, contentinfo, form, main, navigation, search For example, sectioning markup is a way of encoding neutral space around a block of content, providing a boundary around the content and giving it a descriptive label. We can use semantic markup to encode the purpose of specific elements, and to describe the information hierarchy of page content. From a semantic perspective, we can use html elements for a similar purpose, showing which elements are related and which are distinct. With neutral space, such as margins, line height, indents, and blank lines, we guide readers through documents. Neutral space is an attribute that we use to describe visually how elements are related and sequenced. Here we focus on those elements that are specific to web typography. In Chapter 5, Site Structure, we covered the basic principles of semantic content markup. For example, we can create a table of contents by extracting headings from a document and providing a document overview in outline format. We also use semantics to provide additional layers of experience, and make connections that are not possible through visual means only. With semantic markup, we describe content structure visually and programmatically to communicate more effectively to more users. On the web, we can encode structure and meaning into documents.
It may seem counterintuitive to begin a chapter on web typography by discussing semantic markup, but typography is visual semantics-the use of visual encodings to convey structure and meaning. This is especially true for typographic design, since there is such variation in what makes for optimal readability and legibility. In the end, the best pages are those that can be readily displayed by users, with designs that meet their needs and preferences. Good web typography adapts gracefully to these different contexts. Adaptable display: The visual display of text depends on many variables, such as user settings, context of use, device used, and size of the viewport.
TYPOGRAPHY FONT GEORGIA AND NOT SOFTWARE
Encoded semantics: With web typography, hierarchy and relationships are encoded into text, such that the information is available programmatically and can be read by such tools as text-to-speech software, like screen readers, which read web pages aloud and software that indexes documents for searching and retrieval, like search engines.Web typography has several distinct differences from print typography: Good web typography encodes those relationships, and adapts gracefully to different contexts of use. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text. When readers scan a page, they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, and then they parse the language and read. Typography plays a dual role as both verbal and visual communication.
Typography is the balance and interplay of letterforms on the page-a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Lynch and Sarah Horton Chapter 9īook design is not one of those crafts that allow for infinite and unfettered creativity.