Web Style Guide: TYPOGRAPHY - Sandhills Community College

More documents

Recommendations

Info

Web Style Guide: TYPOGRAPHY www.dartmouth.edu/~wug and www-3.ibm.com/ibm/easy When designing a fixed-width layout, we typically use page layout tables with text cells no wider than about 365 pixels. If 12-point Times New Roman type is used, this cell width yields a line about fifty characters long, averaging about nine to ten words per line. We believe that this achieves the best http://webstyleguide.com/type/print/type.html (12 of 31)5/17/2005 5:18:39 PM
Web Style Guide: TYPOGRAPHY balance between space efficiency and legibility. If you choose a flexible layout approach, use CSS leading controls to increase line spacing to 15 or 16 points (see White space). Additional line spacing allows a somewhat longer line length without sacrificing legibility. White space The vertical space in a text block is called leading, and it is the distance from one baseline of text to the next. Leading strongly affects the legibility of text blocks: too much leading makes it hard for the eye to locate the start of the next line, whereas too little leading confuses the lines of type, because the ascenders of one line get jumbled with the descenders of the line above. In plain HTML it is not possible to implement true leading, but CSS offers leading control (referred to as "line spacing" in CSS terminology). In print one 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 could be set with 14 points of leading. We suggest generous leading to compensate for longer line lengths and the lower resolution of the computer screen, for example, 12-point type with 14 to 16 points of leading. Indenting paragraphs There are two major schools of thought on denoting paragraphs. The classic typographic method uses indents to signal the beginning of a new paragraph (as we have in this book). However, many technical, reference, and trade publications now use a blank line of white space to separate paragraphs. Indented paragraphs work especially well for longer blocks of prose, where the indents signal new paragraphs with minimal disruption to the flow of text. Blank line spacing between paragraphs, in contrast, makes a page easy to scan and provides extra white space for visual relief. Either approach is valid as long as the paragraph style is implemented consistently throughout the site. To indent paragraphs without using CSS, you can insert several non-breaking space characters ( ) at the start of each paragraph. You can also use a transparent single-pixel GIF graphic as a spacer and adjust its horizontal spacing. If you are using CSS you can set the exact spacing for the indentation using the "text-indent" property of paragraphs. To indent paragraphs without using CSS, ... To indent paragraphs without using CSS, ... To indent paragraphs without using CSS, ... http://webstyleguide.com/type/print/type.html (13 of 31)5/17/2005 5:18:39 PM
Page 1 and 2: Web Style Guide: TYPOGRAPHY TYPOGRA
Page 3 and 4: Web Style Guide: TYPOGRAPHY on) bec
Page 5 and 6: Web Style Guide: TYPOGRAPHY This bo
Page 7 and 8: Web Style Guide: TYPOGRAPHY Legibil
Page 9 and 10: Web Style Guide: TYPOGRAPHY layout
Page 11: Web Style Guide: TYPOGRAPHY Until t
Page 15 and 16: Web Style Guide: TYPOGRAPHY Times N
Page 17 and 18: Web Style Guide: TYPOGRAPHY The ear
Page 19 and 20: Web Style Guide: TYPOGRAPHY You can
Page 21 and 22: Web Style Guide: TYPOGRAPHY We reco
Page 23 and 24: Web Style Guide: TYPOGRAPHY uncomfo
Page 25 and 26: Web Style Guide: TYPOGRAPHY If you
Page 27 and 28: Web Style Guide: TYPOGRAPHY miss th
Page 29 and 30: Web Style Guide: TYPOGRAPHY page ba
Page 31: Web Style Guide: TYPOGRAPHY Marks.

Web Style Guide: TYPOGRAPHY - Sandhills Community College

Create successful ePaper yourself

Delete template?

Save as template?