DesignMagz

Variasi Arial dengan CSS

---

Bosan dengan huruf Arial ? Terkadang saya sendiri berfikir, kapan dunia Web akan seperti dunia cetak dimana kita bebas menggunakan font apa saja tanpa kendala. Tips ini mungkin akan bermanfaat untuk Anda yang menginginkan font dengan tampilan berbeda namun tetap standard. Idenya sangat sederhana, mengatur Arial hanya dengan CSS.

Karakter Arial
“Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.”

Normal
“Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.”

Variasi 1
Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.

Teks diatas menggunakan Arial dengan ukuran huruf 11px, perbedaannya, ia ditampilkan dengan menggunakan properti "letter-spacing: 1px;"

.arial {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
}

Variasi 2
Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.

Teks diatas menggunakan Arial dengan ukuran huruf 12px, disini ia ditampilkan dengan menggunakan "letter-spacing: -1px;" dan "word-spacing: 3px"

.arial {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -1px;
word-spacing: 3px;
}

Variasi 3
Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.

Variasi 3 ini cocok untuk menggantikan Verdana sebagai caption atau footnote, ukuran yang dipergunakan pada variasi ini adalah 10px, dan diberikan ketebalan "font-weight: bold;"

.arial {
font-size: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Variasi 4
Variasi ini saya pergunakan pada judul/header Design World, ia menggunakan:
h2 {
font-weight: bold;
font-size: 14pt;
font-family: Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: -1.8pt;
}

Nampak berbeda bukan? Saya pernah menggunakan beberapa variasi diatas untuk beberapa desain situs yang pernah saya buat, beberapa rekan kerja bertanya: “Itu font apa sih?”, “Eh itu pakai font Lucida atau Tahoma?” (Variasi 1), “Web kok pakai Arial Narrow, kan nggak standard” (Variasi 2), untuk variasi 3 banyak yang mengira itu Verdana, “Arial Black emang cocok buat judul ya?” (Variasi 4), He..he..he.. Ketipu looo :D.