better armenian typography in web design
Post on 10-Apr-2015
693 Views
Preview:
TRANSCRIPT
Better Armenian Typography Online
Using Principals of Typography and Modern Web Technologies
By Dn. Matthew Ash
www.mattash.commatt.ash@gmail.com
typography1. the art or process of setting and arranging types and printing from them. 2. the style and appearance of printed matter.
typography1. the mechanical notation and arrangement of language
– Mark Boulton
1. Web Design ♥’s Typography
2. Elements of Typography
3. The Issue of Armenian Typefaces
4. The CSS3 Salvation
Web Design ♥’s TypographyYou can’t have one without the other
Web Design is 95% Typography
Typography is
1. Communication
2. Interface
3. Identity
The Elements of TypographyAs they apply to web design
Measure
p { font-size: 10px; max-width: 300px;}
CSS
Leading
body { font-family: Helvetica font-size: 12px; line-height: 16px;}
CSS
Rhthym
body { font-family: Helvetica; font-size: 12px; line-height: 15px;}
p { margin-bottom: 15px;}
CSS
Armenian Fonts & Web DesignThey are not friends… yet
Serif1. Georgia2. Palatino Linotype3. Times New Roman4. MS Serif5. Garamond6. Bookman Old Styl
Sans-Serif1. Verdana2. Arial3. Arial Black4. Symbol5. Impact6. Tahoma7. Century Gothic8. Lucida Grande9. Lucida Grande Unicode10.Trebuchet MS11.MS Sans Serif
Monospace1. Courier New2. Courier3. Lucida Console
Common Fonts (English)
Serif1. Mshtakan Mac
Sans-Serif1. Sylfaen Windows2. Arial Unicode MS Office
Monospace
Common Fonts (Armenian)
Body {
font-family: 'Arian AMU', 'Arial AMU', 'Arial Unicode', Arial, Helvetica, sans-serif !important;
/* we hope this works! */
}
The Common Solution
Web Fonts are the solutionA newly available HTML5 / CSS3 method
Our Tools
1. Our desired Armenian Font (Unicode Preferred)
2. Font Squirrel @font-face Kit Generator
3. FontKit’s Web Font Loader
@charset "UTF-8";
@font-face {font-family: 'ArianAMU';src: url('arnamu-webfont.eot');src: local('☺'), url('arnamu-webfont.woff') format('woff'), url('arnamu-webfont.ttf') format('truetype'), url('arnamu-webfont.svg#webfontbPntyCTf') format('svg');font-weight: normal;font-style: normal;
}
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript"> WebFont.load({ custom: { families: ['ArianAMU'], urls : ['stylesheet.css'] } });</script>
Web Font Loader
:lang(hy) {
font-family: 'ArianAMU';
}
The CSS
1. The Grabar Cheatsheet
2. The Oratsouyts Online
Examples
1. Improving Armenian Font Support on The Web
2. Web typography
3. Five simple steps to better typography
4. 8 Simple Way to Improve Typography in your Design
5. Typography is Important
Links
Thanks
top related