Text

1
Text
2
Some Typography Terms

• Kerning
• Leading
• Tracking

3
(No Transcript)
4

• FONT element
• No longer part of HTML
• But still used on many new and older sites
• Future browsers may not support it
• FACE attribute of the FONT element
• Font lists (font lists are also used in CSS ch
  11)
• Browser uses first matching font face
• Use a generic font face as the last one in the
  list
• If no matches, the browsers default is used
• All fonts in a single font list should have
  similar structure and characteristics WHY?
• All HTML text has a default size of 3

5
Headings

• Why use Headings (in the Format box) vs Size?
  ACCESSIBILITY
• Heading text is read by HTML readers as headlines
• Regular large text is read as body copy
• H1 is the largest
• H6 is the smallest
• There is another BIG difference between Heading
  text and text with a large size. What is it?

6
Speaking of the Format BoxWhat is Preformatted
text?

• Preformatted text preserves the white space that
  you add to your page.
• You can use consecutive spaces.
• You can use tabs
• Uses the ltPREgt tag
• Unless you specify a font, Preformatted text is
  displayed using a monospace font.

7
Choosing a FontRules are different for Print and
Web

• Blocks of serif text are easier to read in PRINT
  because the serif of one letter leads you eye
  gracefully to the next letter. Serifs help give
  type distinctive shapes, thereby increasing
  readability.
• On a computer screen, type is made up of pixels
  and not continuous lines. Serifs use up pixels
  and thus reduce the white space within and around
  a character. This reduces readability. Use a sans
  serif font.

8
Mac vs. Windows

• HTML text appears much larger on Windows than it
  does on the Mac.
• Solution Use Style Sheets and size your text
  using pixels. This only works on browsers of
  version 4.0 and newer
• Solution Use images of text instead of HTML
  text. See next few slides about text images vs.
  HTML text

9
HTML text vs. Graphical Text http//www.crendo.co
m/articles/textvsimage.htm

• HTML Text has some disadvantages
• limited formatting options vs. Photoshop or a
  page layout program
• cannot directly control kerning, leading,
  tracking
• no anti-aliasing to smooth out text

10

• HTML text has some advantages
• it can be found by search engines
• it is typically the only choice for information
  coming dynamically out of a database
• it can be maintained by someone with access to a
  text editor and and ftp program
• it can be controlled by style sheets which make
  mass changes to the text on a web site
  straightforward
• faster to download than an image

11

• Graphical text has some advantages
• wide range of fonts available to create desired
  look
• end-user doesn't need to have the font the
  designer chose to use in the graphic
• adds some branding to the web site
• anti-aliasing technology smooths out the type and
  makes it less jaggy looking
• html text has limited formatting but all sorts of
  tricks can be done with graphics and text using
  Photoshop

12

• Graphical text has some disadvantages
• html text can be done with a built-in text editor
  such as notepad or simpletext while graphical
  text requires an image editor such as Photoshop.
• harder to edit
• if a graphic with text needs editing, the person
  doing the editing will need to have the right
  font(s) installed and active on their system or a
  font substitution may occur which could change
  the look of the text considerably

13

• Graphical text has more disadvantages
• some fonts, especially at smaller sizes with
  anti-aliasing turned on, can look fuzzed/mushy
  and can be somewhat hard to read
• not usually a good choice for large blocks of
  text (such as a press release, for example)
• search engines can't read text inside a graphic
• auto-language-translation programs can't
  translate text inside a graphic
• take longer to load

14
What is Anti-aliasing?

• Anti-aliasing is a way of getting around the low
  72dpi resolution of the computer monitor and
  making objects appear more smooth.
• Never confuse blur and anti-aliasing. Blur is a
  great help in making things appear nice and
  smooth if applied to specific parts of an image,
  but it'll make your image just look runny if used
  all over.

15
Not anti-aliased
16
Anti-aliased
17

• Rule of Thumb for Anti-aliasing Text Graphics
• Always anti-alias text except when the text is
  very small. This is a matter of taste but switch
  off anti-aliasing in Photoshop below about 12
  points. If you are using a lot of text this size,
  you really should think about putting it in HTML
  text instead of in a graphic.

18
Align Attribute in the img Tag

• Default varies with browser, usually Bottom
• Baseline Aligns the baseline of the text to the
  bottom of the image
• Bottom Same as Baseline
• Abs Bottom Aligns text including descenders to
  the bottom of the image
• Top Aligns the image with the tallest part of the
  object (image or text)

19
Align Attribute in the img Tag

• TextTop Aligns the image with the tallest
  character in the line of text
• Middle Aligns the baseline of the text to the
  middle of the image
• Abs Middle Aligns the middle of the text to the
  middle of the image
• Left Left-aligns the image and wraps text to the
  right
• Right Right-aligns the image and wraps text to
  the right

20
3 Kinds of Lists

• Ordered lists
• Unordered lists
• Definition lists

21
HTML Styles

• Easy way to quickly format text in a document
• You just save your text formatting attributes and
  then apply them to any text on a page or within
  an entire site.
• Unlike Cascading Style Sheet, CCS, HTML styles
  work in browsers earlier than 4.0
• DreamWeaver saves your styles inside a Library
  folder in your local root folder. It is NOT
  necessary to upload this folder when you publish
  your web site.

22
Flash Text

• Macromedia is the company that produced
  Dreamweaver MX
• Macromedia also produces an application called
  Flash MX
• Uses a proprietary file format called SWF (swiff)
• Great for vector based drawing, animation,
  rollovers
• Users browser MUST have the Flash MX plug-in (a
  free download)