1

Chapter 8TYPOGRAPHY

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

Characteristic of type on the web

● Type on screen and type printed on paper are different in crucial ways.

● The computer screen readers typefaces at a much lower resolution than is found in books, magazine, and even pages output from inexpensive printers.

● Most magazine and book typography is printed at 1200 dot per inch (dpi) or greater, but computer screen rarely show not more than 85 pixels per inch (ppi)

Characteristic of type on the web

● To increase the apparent resolution of type on the computer screen, operating systems like Microsoft Windows and Apple Macintosh use anti aliased type.

● Anti aliasing works by smooting the edges around type, so that normal screen reading distances the type looks much like high resolution printed type

Aliazed and anti aliazed type

On-the-fly construction

● Each line of text, each headline, and each unique font and style are re-created by a complex interaction of the web browser, web server, and the operating system of the reader's computer.

● The process is fraught with the unexpected : a missing font, an out-of-date browser, a peculiar set of font preferences designated by the reader.

Content structure and visual logic

● The originators of html were scientists who wanted a standard means to share particle physics documents.

● HTML was designed to enforce a clean separation of content structure and graphic design.

Cascading style sheet

● This division between structural logic and visual logic is reconciled through the use of Cascading Style Sheet.

● Style sheets provide control over the exact visual style of headers, paragraphs, lists, and other page elements.

Advantage of CSS● CSS offer web designers two key advantages :

– Separation content and design

– Efficient control over large document sets● Style sheets provide greater typographic control

with less code

● The greatest advantage of Css it that it enables universal usability by giving you the ability to control the way your site looks in very different display circumstances.

● The fundamental idea behind CSS is to let site authors and users determine the size, style, and layout details for each standard html tag

Example of CSS

<h1 align=”center”><font face=”Verdana, Helvetica, Arial, sans-serif” size=”6” color=”gray”>Section Heading</h1>

h1 { text-align:center; font-size:1.4em; font-family:Verdana, Helvetica, Arial, sans-serif; color:gray}

Media style sheets

● Print style sheets control formatting of pages when they are printed on paper, and handheld style sheets control formatting when pages are accessed using a mobile device.

● Consistency of style sheet gives polish to a site and encourages visitors to stay by creating an expectation about the structure of a text

Legibility

● Good typography depends on the visual contrast between one font and another, as well as among text blocks, headlines, and the surrounding white space.

● When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page.

● The first thing the reader sees is the overall pattern and contrast of the page.

Example of legibility

Alignment and white space

● Margins define the reading area of your page by separating the main text from the surrounding environment.

● Margins and space can be used to delineate the main text from the other page elements.

● When used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages.

Alignment options (1)

● Text blocks have different ways of sitting within margins.

– Justified text● Create solid rectangle, and heading

normally centered for a symmetrical, formal-looking document

– Centered and right-justified text blocks● Centered and right-justified text blocks are

difficult to read. We read from left to right, anchoring our tracking across the page at the vertical line of the left margin.

Alignment options (2)

– Left-justified text● Is the most legible option for the web pages

because the left margin is even and predictable and the right margin is irregular

– Justification of headlines● Justified text should not be used on web

pages. Centered display type contrasts with the asymmetry of the ragged-right margin of left-justified body text and produces an unbalanced page.

Example

Example

Line length

● Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most web pages violates a fundamental rule of book and magazine typography : the lines of text on most web pages are far too long for ideal reading.

● When designing a fixed-width layout, set text columns to no wider than 365 pixels.

● If you choose a flexible layout approach, use css leading controls to increase line spacing

Leading

● Is the vertical space in the text block, the distance from one baseline of text to the next.

● Too much leading makes it hard for the eye to locate the start of the next line,

● Too little leading confuses the lines of type,

● In print the general rule is to set the leading of text blocks at about 2 points above the size of the type. For example, 12-point type with 14-point leading.

● Blank line spacing between paragraphs makes a page easy to scan and provides extra white space for visual relief.

Example

<html>

<body>

<p>ini contoh paragraf 1</p>

<p>ini contoh paragraf 2</p>

<p style=”text-indent: 2em”>ini contoh paragraf 3</p>

<p style="margin-bottom: 1.2em">ini contoh paragraf 4</p>

</body>

</html>

Typefaces

● In specifying typefaces you should choose from the resident default fonts for most operating systems.

Typefaces – Legibility on-screen

● Some typespace are more legible than others on the screen.

● Typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size too small and its shapes look irregular

Typefaces – traditional typeface

● Times New Roman is a good font to use in text-heavy documents that will probably printed by readers rather than from the screen

Typefaces – Designed for the screen

● Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen.

● They have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size.

● However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.

Typeface – typeface for other media

● Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than relatively few that are readable and attractive on-screen.

● In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.

Choosing typefaces

● The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines.

● It is safest to use a single typographic familiy and vary its weight and size for display type and emphasis.

● Don't use more than two typefaces on a page.

Specifiying typefaces

● If the typeface you specify is not aviable on the user's computer, the browser will switch to the default font.

● To increase chances that the reader will see your preferred typeface, you can specify multiple fonts for each style.

● Example :

p {font-family:”Times New Roman”, Georgia, Times, serif}

Type size

● Scalable text is essential to the goals of universal usability.

● To ensure scalability, use relative units to control the typography (type size, margins, leading) on the page.

● Setting the body text to the default text size defined in users browser settings and setting all text variant using relative unit, such an ems or percentages.

● An em in the web context is the same as the font height

Type sizes for comfortable reading

● Some useful lessons from reading studies :– Readers like large type

– Generous leading is a key to legibility

Emphasis

● The key to effective display type is the careful and economic use of typographic emphasis.

● A good rule of thumb when working with type is to add emphasis using one parameter at a time

Emphasis - Italic

● Avoid setting large blocks of text in italics because the readability of italicized text, particularly at screen resolution, is much lower than in comparably sized plain text.

Emphasis - Bold

● Bold text give emphasis because it contrasts in weight from the body text.

● Section subheads work well set in bold.

Emphasis - Underlining

● Underlining has a special function meaning in web documents which is identify links within text blocks.

● If you include underlined text on your web page, it will certainly be confused with a hypertext link.

Emphasis - Color

● You should avoid putting colored text within text blocks because readers will assume that the colored text is a hypertext link and click on it.

● Avoid using colors close to the default web link colors of blue and violet.

Emphasis - Capitals● Capitalized text is one of the most common and

least effective methods for adding typographical emphasis.

● Words set in all capitals should generally be avoided, except for short headings.

● Words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the eye.

● Down-style typing (capitalize only the first word and any proper nouns) for your headlines, subheads, and text

example

Spacing and indentation

● One of the most effective and subtle ways to vary the visual contrast and relative importance of a piece of text is to isolate it or treat it differently from the surrounding text.

● If you want your major headings to stand out more without making them larger, add space before the heading to separate it from any previous copy

● Indentation is another effective means of distinguishing bulleted lists, quotation, or example text.

Semantic emphasis

● Using CSS you can style the semantic emphasis (<em>) and strong emphasis (<strong>) html tags to look any way you choose.

Example Semantic Emphasis

Display typograph with graphics

● In enterprises with strong and consistent identity programs, you should always use the recommended “company” typefaces and logo treatments according to the corporate identity program, and usually that will mean rendering header-area logos and display typography within graphics program like adobe photoshop

● When using graphics for text, always provide the equivalent text using the “alt” attribut of the <img> tag so that the text is avaible to nonvisual users, users with images disabled, and software such as search engines.

Example

Data ink vs Chartjunk

● Signal-to-noise ratio from Edward Tufte's, shouldn't use loud polka-dot patterns in their graphs and charts.

● Three factors combine to produce “webjunk”

– The desire for attention at any cost

– The restricted space of the screen

– Lack of control over the elements of a page