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