Tipografija za web
~
10 prljavih trikova*
Marko Dugonjić
maratz.com
* OMG koji cliché!

1. Basic reset
*{
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
/* 16px x 62.5% = 10px */
}

2. Ubij kontrast
.bijelo-na-crnom {
color: #ccc;
background: #000;
}
.crno-na-bijelom {
color: #444;
background: #fff;
}

3. Veličina teksta i prored
p{
font-size: 1.2em;
/* 10px (reset) x 1.2em = 12px */
line-height: 1.5;
/* 1.2em x 1.5 = 18px */
}

4. Margine u ritmu
p{
font-size: 1.2em;
/* 10px (reset) x 1.2em = 12px */
line-height: 1.5;
/* 12px x 1.5 = 18px */
margin-bottom: 1.5em;
/* 12px x 1.5 = 18px = line-height
}

5. Matematika
— analiza sadržaja
• YouTube klipovi
• Dimenzije oglasnih površina
• Naslijeđeni sadržaj (slike i video)

6. Matematika
— idealne proporcije
• Zlatni rez (1:1.61)
• Pravilo trećina
• Tipografska skala:
60 72
36 48
18 21 24
12 14
10 11

7. Trebuchet,
love hate relationship
Zašto mrzim Trebuchet™
— nakaradne kombinacije kerning
parova u .hr riječima: prije, jelovina
Zašto ipak volim Trebuchet?
— NENADMAŠIV UPPERCASE (NA 11PX)

8. Tablice:
skrivene vertikale
th, td {
vertical-align: top;
text-align: right;
}
th[scope=”row”] {
text-align: left;
}

9. Tablice:
čvrsto i sigurno
table {
border-collapse: collapse;
font-size: inherit;
table-layout: fixed;
}

10. Pravi znak
za pravu stvar
vs 'i'
‘ i ’
“ i ” vs \"i\"
— i – kao —i–

fla!
~
http://www.maratz.com/blog/?s=typography
http://www.typetester.org/