acsc 231 internet technologies - fitstaff.fit.ac.cy/com.ke/files/acsc_231/lecture 7.pdf · acsc 231...

ACSC 231Internet Technologies

Lecture 7Lecture 7Web Typography

Ef h l K A P f F d k UEfthyvoulos Kyriacou - Assoc. Prof. Frederick University

Resources: C. Markides (Frederick University)

Slide 1 ACSC 231: Internet Technologies 23/12/2008

Objectivesj

U d d d i i i l• Understand type design principles• Understand Cascading Style Sheets (CSS) g y ( )

measurement unitsU th CSS f t ti• Use the CSS font properties

• Use the CSS text spacing propertiesp g p p• Create a font and text properties style

sheetsheet


Understanding Type D i P i i lDesign Principles

Ch f f d i• Choose fewer fonts and sizes• Choose available fonts• Design for legibility• Avoid using text as graphics


ACSC 231: Internet Technologies 23/12/2008

Understanding CSS M U iMeasurement Units

CSS ff i f i • CSS offers a variety of measurement units, almost to the point of offering too many choices

• For example to specify font size you can • For example, to specify font size, you can use any of the measurement units listed in th f ll i t blthe following table



Ab l U i• Absolute Units– Specify a fixed value

• P {margin: 1.25in;}

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

of destination medium are knownof destination medium are known



R l i U i• Relative Units– Enables scalable Web pages that adapt to

different display types and sizes– Recommended method for Web page designp g g



R l i l h • Relative measurement values such as em and px are designed to let you build scalable Web pages that adapt to different display types and sizes. p y yp

• The W3C recommends that you always l ti luse relative values.


Using the CSS Font Propertiesg p

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


Specifying Font Familyp y g y

All ifi i f i f f il • Allows specification of generic font family names (e.g., sans-serif) or a specific name (e.g., arial)

p {font-family: sans-serif;}

p {font-family: arial;}


Specifying Font Sizep y g

Th f ll i l h l • The following rule sets the <p> element to 1.5em Arial:

i ip {font-family: arial; font-size: 1.5em;}


Specifying Font Stylep y g y

Th f l l if • The font-style property lets you specify italic or oblique text.

i ip {font-style: italic;}


Specifying Font Variantp y g

Th f i l d fi • The font-variant property lets you define small capitals, which are often used for chapter openings, acronyms, and other special purposes.p p p

h1 {font variant: small caps;}h1 {font-variant: small-caps;}


Specifying Font Weightp y g g

Th f i h l h • The font-weight property lets you set the weight of the typeface.

ip {font-weight: bold;}


Using the Font Shortcut PProperty

Th f h l • The font shortcut property lets you abbreviate the more verbose individual property listings. The following rules produce the same results.p

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

p {font: bold 18pt/24pt arial;}Slide 21 ACSC 231: Internet Technologies 23/12/2008

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

CSS Text Spacing Propertiesp g p

i d• text-indent• text-aligng• text-decoration• line-height• vertical-alignvertical align• letter-spacing• word-spacing


Specifying Text Indentsp y g

U h i d h • Use the text indent property to set the amount of indentation for the first line of text in an element, such as a paragraph. The following rule sets an indent of 24 gpoints:{f t f il t t i d t 24 t }p {font-family: text-indent: 24pt;}


Specifying Text Alignmentp y g g

U h li • Use the text-align property to set horizontal alignment for the lines of text in an element.

p {text-align: justify}


Specifying Text Decorationp y g

U h d i dd • Use the text-decoration property to add or remove underlining from text. The following code removes the underlining from hypertext links.yp

a {text-decoration: none}


Specifying Text Decorationp y g


Specifying Line Heightp y g g

CSS ll if i h • CSS allows you to specify either a percentage or absolute value for the line height, which is more commonly called leading. The following rule sets the line g gheight to 2 em:

p {line-height: 2 em;}


Specifying Vertical Alignmentp y g g

Th i l li l dj • The vertical-align property lets you adjust the vertical alignment of text within the line box.

• Vertical-align works on inline elements • Vertical-align works on inline elements only.


Specifying Vertical Alignmentp y g g

Y l i l li li • You can also use vertical alignment to align text with graphics. The following rule, added to the <img> element with the style attribute, sets the vertical alignment to top:, g p

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


Specifying Letter Spacingp y g p g

T dj k i h i ’ f • To adjust kerning, the printer’s term for adjusting the white space between letters, use the letter spacing property. The following rule sets the letter spacing to 4 g p gpoints.

h1 {letter-spacing: 4pt;}


Specifying Word Spacingp y g p g

Th d i l dj • The word-spacing property lets you adjust the white space between words in the text. The following code sets the word spacing to 2 em.

h1 {word-spacing: 2em;}


Summaryy

U t t i t i f ti • Use type to communicate information structure. Be sparing with your type h i d f t i t tlchoices, and use fonts consistently.

• Remember that XHTML text downloads faster than graphics-based text. Use XHTML text whenever possible.p

• Use browser-safe fonts that will display as consistently as possible across operating consistently as possible across operating systems

Slide 41 C ACSC 231: Internet Technologies 23/12/2008

Summaryy

S d di l b b ildi l l • Standardize your styles by building external style sheets and linking them to multiple documents.

• Test your work. Different browsers and computing platforms render text in different sizes.

• Use type effectively by choosing available fonts yp y y gand sizes. Design for legibility and use text to communicate information about the structure of your material.


Summaryy

Ch h i • Choose the correct measurement unit based on the destination medium. – For the computer screen, ems, pixels, or

percentage measurements can scale to the p guser’s preferences.


Summaryy

U h f i l h l k • 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 different y p y p p yplatforms.

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


acsc 231 internet technologies - fitstaff.fit.ac.cy/com.ke/files/acsc_231/lecture 7.pdf · acsc 231...

Documents