Pertemuan 5 - Typography

8/8/2019 Pertemuan 5 - Typography

1/14

TypographyBayu Priyambadha, S.Kom


2/14

Typography

Typography formed from two words :

Typos means impression, mark or form

Grapheia means writing


3/14

Text Basic media for many multimedia systems Texts in the form of words, sentences and

paragraphs is used to communicatethoughts, ideas and facts in nearly every

aspect of our lives Typography exists to honor content


4/14

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


5/14

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 titleor other details on the page but the overall

pattern and contrast of the page.


6/14

Taking Type to the Web

90s brief trend of typography

Think of the lowest common

denominator font

There are 9 fonts known asthe safe lists

font-family: 'Calisto MT', Georgia,

'Times New Roman', serif;


7/14

Displaying Text in Images

Really use the specific font?

Rely on images to display the text


8/14

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


9/14

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 isnt 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

youve designated as something youd 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


10/14

The Blatantly Obvious Solution: Using Safe Fonts

Some designers said sIFR is bad way to be

used

Using the safe lists doesnt make

monotone


11/14

Anatomy of a Letterform


12/14

Text Spacing

Horizontal Spacing

Kerning

Vertical Spacing

leading


13/14

Text Alignment

Two warnings about justified text :

A river runs through it.

What? Are? You? Saying?

Browser doesnt have an auto-hyphenation function


14/14

Try This!!!

http://www.typetester.org/

Pertemuan 5 - Typography

Documents