Web Design and Development

theLonelyWolf

05-Typography.pptx

Home >Information Systems homework help >Web Design and Development

Typography

CP1406/CP5638

Learning Outcomes

understand important aspects of typography and how these affect:

legibility, meaning and “feel”

be able to use CSS to specify font and text properties

Understanding Type Design Principles

the default font usually looks "unfinished"

using good typography can greatly enhance the look and professionalism of a site

choose only a few fonts and sizes (don't overdo it)

choose available fonts (not unconventional ones)

design for legibility

avoid using text as graphics (use actual text)

Fonts evoke emotion - they 'mean' something

choose a font that matches the feeling that you want for your site

a font creates something like a "tone of voice" for your written text

choosing a typeface is not a quick "whatever; I like it" decision

What do the typefaces on the following pages "say" to you? Finish these sentences… what kind of company do you think would have each of these fonts..?

Call it out straight away – your first reaction.

Because we're #1 in…

Choose Only a Few Fonts and Sizes

your pages will look cleaner when you choose fewer fonts and sizes of type compared to lots of different fonts

decide on a font for each different level of topic importance, such as page headings, section headings, and body text (but these can be the same!)

communicate the hierarchy of information with changes in the size, weight, or color of the typeface rather than different fonts

e.g. heading text should look different (more important) than paragraph text

Design for Legibility

Simply: can you read it easily?

Browser version, operating system, and video capabilities can produce variations in the weight, spacing, and rendering of the font families to individual users

so test on different systems

Use Common Web Fonts

fonts are installed on the user's device, so the user’s browser and operating system determine how a font is displayed (if it is displayed at all)

to more effectively control how text appears on your pages, think in terms of font families, such as serif and sans-serif typefaces

"sans" is French for "without"

"serifs" are the little extra strokes on the end of letters

in general, sans serif fonts are for screen, serif for print

serif font text is hard to read on screen when it's small because the serifs are only displayed in a few pixels

Specifying Font Family

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;}

Specific Font Families

the font-family property lets you declare a specific font family such as Arial or Verdana

the font must be installed on the user's computer, otherwise the browser uses the default font

so, if you used 3 very different fonts that the user didn't have, they would all look the same

p {font-family: arial; }

Check http://www.cssfontstack.com for compatibility and useful CSS code

Generic Font Families

these are not specific fonts, but a 'category' of fonts – e.g. monospace fonts have the same width for each character; courier and consolas are both examples

Serif

Sans serif

Monospace

Cursive

Fantasy

Font Fallbacks

you can specify a list of alternate fonts

the browser will attempt to load each successive font in the list - If no fonts match, the browser falls back to the default font

p {font-family: arial, helvetica, sans-serif;}

(This means: use Arial, if not, use Helvetica, if not use the default sans-serif font)

So, if you used 3 very different fonts that the user didn't have, they could still all look different if you used different generic font families for each style

CSS3 @font-face Rule

With CSS3, you can load a font from a URL -

It does not have to be on the user's system

@font-face { font-family: myFont;

src: url(sansation_light.woff); }

…

p { font-family: myFont; }

Google fonts – Link to CSS file with font setup

…

p { font-family: 'Tangerine', serif; }

Avoid Creating Text as Graphics

new font options means you don't need to use graphics as much as in the past

because you add download overhead with every additional graphic, save text graphics for 'necessary' purposes

whenever possible, use HTML-styled text on your pages, including creating HTML and CSS-based navigation

if you really need a certain font for a logo or something, you can do this with an image – but only for a few words, OK?

Understanding CSS Measurement Units

CSS offers a variety of measurement units

the measurement unit you choose depends on the destination medium

guideline:

for print media, use absolute units of measurement

for the Web, use relative units of measurement

Absolute Units

specify a fixed value

p {margin: 1.25in;} (inches)

cannot be scaled to client display

should only be used when exact measurements of destination medium are known

Which is when?

When? For Web: never. Useful for print.

Relative Units

enables scalable Web pages that adapt to different display types and sizes

recommended method for Web page design

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

px (pixels) is technically a relative unit, but it will be the same on one user's device unless they change the display resolution - it is relative to something that doesn't really change much

the W3C recommends that you always use relative values

This is the same page but with better "leading" – line spacing at 1 instead of 0.75 => better, less cramped

The em Unit

the em is a measurement taken from printing, traditionally equal to the horizontal width of the capital letter M in any given font size

in CSS, the em unit is equal to the font size of an element

since it's relative to the font size, it changes with the font size

it can be used for both horizontal and vertical measurement

this is probably the best choice for anything to do with text (e.g. line length, character-spacing, etc.) because it's based on the size of the text

Relative to the font size… what font size?

browsers have a default ("starting point") font size, typically 16px (px not pt).

this can be changed by the user… Text sized with em and % will change with it; text sized with pt and px will not change.

Learning Outcomes

when you understand the important aspects of typography you can use these to create good websites with text that is legible and has the appropriate feel for the goal and audience

CSS gives you a large range of font and text properties to achieve this