lecture 11 web typographystaff.fit.ac.cy/com.me/acsc231/lectures/acsc231_lecture-11_f09.pdf · web...
Post on 24-Sep-2020
2 Views
Preview:
TRANSCRIPT
12/11/2009 ACSC231 - Internet Technologiesand Web Design
1
ACSC 231Internet Technologies
Lecture 11Web Typography
Eleni MichailidouResources:C. Markides
Principles of Web Design
12/11/2009 ACSC231 - Internet Technologiesand 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
12/11/2009 ACSC231 - Internet Technologiesand Web Design
3
Understanding TypeDesign Principles
• Choose fewer fonts and sizes• Choose available fonts• Design for legibility• Avoid using text as graphics
12/11/2009 ACSC231 - Internet Technologiesand Web Design
4
12/11/2009 ACSC231 - Internet Technologiesand Web Design
5
12/11/2009 ACSC231 - Internet Technologiesand Web Design
6
12/11/2009 ACSC231 - Internet Technologiesand Web Design
7
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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
12/11/2009 ACSC231 - Internet Technologiesand Web Design
9
12/11/2009 ACSC231 - Internet Technologiesand Web Design
10
Understanding CSS Measurement Units
• 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
12/11/2009 ACSC231 - Internet Technologiesand Web Design
11
Understanding CSS Measurement Units
• Relative Units– Enables scalable Web pages that adapt to
different display types and sizes– Recommended method for Web page
design
12/11/2009 ACSC231 - Internet Technologiesand Web Design
12
Understanding CSS Measurement Units
• 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.
12/11/2009 ACSC231 - Internet Technologiesand Web Design
13
Using the CSS Font Properties
• font-family• font-size• font-style• font-variant• font-weight• font (shorthand property)
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
15
Specifying Font Size
• The following rule sets the <p> elementto 1.5em Arial:
p {font-family: arial;font-size: 1.5em;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
16
12/11/2009 ACSC231 - Internet Technologiesand Web Design
17
Specifying Font Style
• The font-style property lets you specifyitalic, oblique or normal (default) text.
p {font-style: italic;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
19
12/11/2009 ACSC231 - Internet Technologiesand Web Design
20
Specifying Font Weight
• The font-weight property lets you setthe weight of the typeface:– normal, bold, bolder, lighter
p {font-weight: bold;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
22
CSS Text Spacing Properties
• text-indent• text-align• text-decoration• line-height• vertical-align• letter-spacing• word-spacing
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
24
12/11/2009 ACSC231 - Internet Technologiesand Web Design
25
Specifying Text Alignment
• Use the text-align property to sethorizontal alignment for the lines of textin an element.
p {text-align: justify}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
26
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
28
Specifying Text Decoration
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
30
12/11/2009 ACSC231 - Internet Technologiesand Web Design
31
12/11/2009 ACSC231 - Internet Technologiesand Web Design
32
Specifying Vertical Alignment
• The vertical-align property lets youadjust the vertical alignment of textwithin the line box.
• Vertical-align works on inline elementsonly.
12/11/2009 ACSC231 - Internet Technologiesand Web Design
33
12/11/2009 ACSC231 - Internet Technologiesand Web Design
34
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;">
12/11/2009 ACSC231 - Internet Technologiesand Web Design
36
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
38
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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;}
12/11/2009 ACSC231 - Internet Technologiesand Web Design
40
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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.
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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.
12/11/2009 ACSC231 - Internet Technologiesand Web Design
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.
top related