Typography

Bayu Priyambadha, S.Kom

Typography
• Typography formed from two words :
– Typos means impression, mark or form
– Grapheia means writing
Text
• Basic media for many multimedia systems
• Texts in the form of words, sentences and
paragraphs is used to communicate
thoughts, ideas and facts in nearly every
aspect of our lives
• Typography exists to honor content
Legibility (1)
• Good typography depends on the visual
contrast between one font and another
– Text blocks
– Headlines
– The surrounding white space
• Nothing attracts the eye and brain of the
reader like strong contrast and distinctive
patterns
Legibility (2)
• When your content is primarily text,
typography is the tool you use to “paint”
patterns of organization on the page
• The first thing the reader sees is not the title
or other details on the page but the overall
pattern and contrast of the page.
Taking Type to the Web
• 90’s brief trend of typography
• Think of the lowest common
denominator font
• There are 9 fonts known as
“the safe lists”
font-family: 'Calisto MT', Georgia,
'Times New Roman', serif;
Displaying Text in Images
• Really use the specific font?
• Rely on images to display the text
Text Replacement with sIFR
• Scalable Inman Flash Replacement
• a technology that allows designers to use
Flash and JavaScript to apply their choice of
fonts to headings
How does the sIFR works?
• A normal (X)HTML page is loaded into the browser.
• A javascript function is run which first checks that Flash is installed and then
looks for whatever tags, ids, or classes you designate.
• If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML
page displays as normal and nothing further occurs. If Flash is installed,
javascript traverses through the source of your page measuring each element
you’ve designated as something you’d like “sIFRed”.
• Once measured, the script creates Flash movies of the same dimensions and
overlays them on top of the original elements, pumping the original browser
text in as a Flash variable.
• Actionscript inside of each Flash file then draws that text in your chosen
typeface at a 6 point size and scales it up until it fits snugly inside the Flash
movie.
http://www.mikeindustries.com/blog/sifr
The Blatantly Obvious Solution: Using Safe Fonts
• Some designers said sIFR is bad way to be
used
• Using “the safe lists” doesn’t make
monotone
 Anatomy of a Letterform

I D xhp
Serif Mean line

Ascender

Cap
height
Point X-height
size

Set
Baseline Counter Descender
width

Shoulder
Text Spacing
• Horizontal Spacing
– Kerning
• Vertical Spacing
– leading
Text Alignment
• Two warnings about justified text :
– A river runs through it.
– What? Are? You? Saying?
• Browser doesn’t have an auto-hyphenation function
Try This!!!
http://www.typetester.org/