lecture 11 web typographystaff.fit.ac.cy/com.me/acsc231/lectures/acsc231_lecture-11_f09.pdf · web...

12/11/2009 ACSC231 - Internet Technologiesand Web Design

1

ACSC 231Internet Technologies

Lecture 11Web Typography

Eleni MichailidouResources:C. Markides

Principles of Web Design


2

Objectives• Understand type design principles• Understand Cascading Style Sheets

(CSS) measurement units• Use the CSS font properties• Use the CSS text spacing properties• Create a font and text properties style

sheet


3

Understanding TypeDesign Principles

• Choose fewer fonts and sizes• Choose available fonts• Design for legibility• Avoid using text as graphics


4


5


6


7


8

Understanding CSS Measurement Units

• CSS offers a variety of measurementunits, almost to the point of offering toomany choices

• For example, to specify font size, youcan use any of the measurement unitslisted in the following table


9


10


• Absolute Units– Specify a fixed value

•p {margin: 1.25in;}

– Cannot be scaled to client display– Should only be used when exact

measurements of destination medium areknown


11


• Relative Units– Enables scalable Web pages that adapt to

different display types and sizes– Recommended method for Web page

design


12


• Relative measurement values such asem and px are designed to let you buildscalable Web pages that adapt todifferent display types and sizes.

• The W3C recommends that you alwaysuse relative values.


13

Using the CSS Font Properties

• font-family• font-size• font-style• font-variant• font-weight• font (shorthand property)


14

Specifying Font Family

• Allows specification of generic font family names (e.g., sans-serif) or a specific name (e.g., arial)– Generic font is a means of preserving some of the style sheet

author's intent in the worst case when none of the specified(specific) fonts can be selected. For optimum typographic control,particular named fonts should be used in style sheets.

p {font-family: sans-serif;}

p {font-family: arial;}


15

Specifying Font Size

• The following rule sets the <p> elementto 1.5em Arial:

p {font-family: arial;font-size: 1.5em;}


16


17

Specifying Font Style

• The font-style property lets you specifyitalic, oblique or normal (default) text.

p {font-style: italic;}


18

Specifying Font Variant

• The font-variant property lets you definesmall capitals or normal (default),which are often used for chapteropenings, acronyms, and other specialpurposes.

h1 {font-variant: small-caps;}


19


20

Specifying Font Weight

• The font-weight property lets you setthe weight of the typeface:– normal, bold, bolder, lighter

p {font-weight: bold;}


21

Using the Font Shortcut Property

• The font shortcut property lets you abbreviatethe more verbose individual property listings.The following rules produce the same results.

p {font-weight: bold; font-size:18pt; line-height: 24pt; font-family: arial;}

p {font: bold 18pt/24pt arial;}


22

CSS Text Spacing Properties

• text-indent• text-align• text-decoration• line-height• vertical-align• letter-spacing• word-spacing


23

Specifying Text Indents

• Use the text indent property to set theamount of indentation for the first line oftext in an element, such as aparagraph. The following rule sets anindent of 24 points:

p {font-family: text-indent: 24pt;}


24


25

Specifying Text Alignment

• Use the text-align property to sethorizontal alignment for the lines of textin an element.

p {text-align: justify}


26


27

Specifying Text Decoration

• Use the text-decoration property to addor remove underlining from text. Thefollowing code removes the underliningfrom hypertext links.

a {text-decoration: none}


28

Specifying Text Decoration


29

Specifying Line Height

• CSS allows you to specify either apercentage or absolute value for theline height, which is more commonlycalled leading. The following rule setsthe line height to 2 em:p {line-height: 2 em;}


30


31


32

Specifying Vertical Alignment

• The vertical-align property lets youadjust the vertical alignment of textwithin the line box.

• Vertical-align works on inline elementsonly.


33


34


35

Specifying Vertical Alignment

• You can also use vertical alignment toalign text with graphics. The followingrule, added to the <img> element withthe style attribute, sets the verticalalignment to top:

<img src="image.gif" style="vertical-align: text-top;">


36


37

Specifying Letter Spacing

• To adjust kerning, the printer’s term foradjusting the white space betweenletters, use the letter spacing property.The following rule sets the letterspacing to 4 points.h1 {letter-spacing: 4pt;}


38


39

Specifying Word Spacing

• The word-spacing property lets youadjust the white space between wordsin the text. The following code sets theword spacing to 2 em.

h1 {word-spacing: 2em;}


40


41

Summary• Use type to communicate information

structure. Be sparing with your type choices,and use fonts consistently.

• Remember that XHTML text downloads fasterthan graphics-based text. Use XHTML textwhenever possible.

• Use browser-safe fonts that will display asconsistently as possible across operatingsystems


42

Summary• Standardize your styles by building external

style sheets and linking them to multipledocuments.

• Test your work. Different browsers andcomputing platforms render text in differentsizes.

• Use type effectively by choosing availablefonts and sizes. Design for legibility and usetext to communicate information about thestructure of your material.


43

Summary

• Choose the correct measurement unitbased on the destination medium.– For the computer screen, ems, pixels, or

percentage measurements can scale to theuser’s preferences.


44

Summary• Use the font properties to control the look of

your letter forms.– Specify font substitution values to ensure that your

text is displayed properly across differentplatforms.

• Use the text spacing properties to createmore visually interesting and legible text.

lecture 11 web typographystaff.fit.ac.cy/com.me/acsc231/lectures/acsc231_lecture-11_f09.pdf · web...

Documents