typography and online communication
DESCRIPTION
Studying typography onlineTRANSCRIPT
![Page 1: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/1.jpg)
![Page 2: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/2.jpg)
Are we in a Visual Age?
What is Visual Age?
![Page 3: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/3.jpg)
User have come to expect – or derive dual information from type selected & the choice of words
Words represent more than one meaning
Connotative
Literary
Visual
![Page 4: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/4.jpg)
Fonts define Theme & Mood
![Page 5: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/5.jpg)
Type design
Arranging Type
Typography
Glyph
![Page 6: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/6.jpg)
Know the Universal Truths
![Page 7: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/7.jpg)
•White on black is easier on the eye than black on white
•Serif fonts are easier to read
•Sentence in upper case are difficult than sentence case
•Variation of font type, size and color makes it complex
Have your own list of universal truth?
![Page 8: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/8.jpg)
Understanding Fonts
![Page 9: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/9.jpg)
What is san-serif about this font?
What is serif about this font?
![Page 10: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/10.jpg)
Vector Font: Fonts that contain instructions for building outlines from lines and curves which are filled to create the solid shapes of letters and other glyphs.Can be scaled to virtually any size and still retain smooth edges. Vector formats include TrueType and PostScript Type1 fonts.
![Page 11: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/11.jpg)
Bitmap Font: Bitmap fonts contain bitmaps of fonts in them. This a picture of the font at a specific size that has been optimized to look good at that size. It cannot be scaled bigger without making it look horrendously ugly.
Size are usually mentioned.
![Page 12: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/12.jpg)
Post Script Type 1
Open Type
Font Type No of files req File extension Note
.pfb - Font file
.pfm - Metric file
.otf - PostScript outlines
.ttf - TrueType outlines
2
1
Both .pfb and .pfm must have the same base name. Windows will automatically create the .pfm if a pair of .afm and .inf files with the same base name are used to install the .pfb.
Post Script Type 3
Vector / Bitmap
True Type .ttf 1 Vector
Bitmap2 .pf3
Vector
Vector
![Page 13: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/13.jpg)
KerningTrackingLine spacingAlignment HierarchyAnti-AliasingGlyphs
![Page 14: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/14.jpg)
glyph names or kerning data - metadata
OpenType fonts may contain more than 65,000 glyphs. An italic 'a' and a roman 'a' are two different glyphs representing the same underlying character.
Kerning is used primarily to fit capital letters, such as T, V, W, and Y,
closer to some other capital letters on either side (especially A)
![Page 15: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/15.jpg)
![Page 16: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/16.jpg)
![Page 17: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/17.jpg)
![Page 18: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/18.jpg)
![Page 19: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/19.jpg)
![Page 20: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/20.jpg)
Web-Typography
Style guide
![Page 21: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/21.jpg)
Personalization
Font availability
Screen resolution
Anti-aliasing available or switched on
Additive vis-à-vis subtractive – eye strain
Can you control these factors?
![Page 22: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/22.jpg)
• Use fonts which are large compared to more traditional typefaces at same point size
• Alternately use one serif & san-serif font on a page
• Identify consumption pattern Print v/s Web
• Use font from one typographic family
•12px for serif and 14 px for san-serif
• Exaggerated x-heights
![Page 23: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/23.jpg)
![Page 24: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/24.jpg)
![Page 25: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/25.jpg)
![Page 26: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/26.jpg)
How are youfeeling?
![Page 27: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/27.jpg)
I am feeling _
I am feeling --
I am feeling¯
Brevity brings more focus
![Page 28: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/28.jpg)
Typography in banners
![Page 29: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/29.jpg)
Space Text
Animation
Image
Factors at play
![Page 30: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/30.jpg)
Which factor?
![Page 31: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/31.jpg)
![Page 32: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/32.jpg)
![Page 33: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/33.jpg)
![Page 34: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/34.jpg)
![Page 35: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/35.jpg)
![Page 36: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/36.jpg)
![Page 37: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/37.jpg)
![Page 38: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/38.jpg)
Web 2.0
![Page 39: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/39.jpg)
![Page 40: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/40.jpg)
Is this the beginning?
![Page 41: Typography and online communication](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c75e304a79598e0a8b45c3/html5/thumbnails/41.jpg)
Nazim [email protected]