The Ultimate Guide to CSS Typography

Kali ini aku mencoba untuk membahas tentang "Typography". Menurut wikipedia, typography / Tipografi merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.


Nah, dari situ diketahui kalau typography dapat membantu pembaca agar merasa nyaman membaca sehingga apabila kita menulis suatu tulisan dengan menggunakan ilmu typography ini maka tidak mungkin para pembaca tulisan kita akan merasa betah. Dengan begitu bukan tidak mungkin kalau pembaca tulisan kita di blog atau website misalnya akan kembali lagi.

Aku juga membuat sebuah blog sederhana dimana blog tersebut menggunakan typography [dapat dilihat disini]. Namun, saat ini typography seringkali terabaikan jadi sangat sedikit blog maupun web yang masih menggunakan ilmu ini. Sebenarnya tidak susah menggunakan typography. Berikut akan aku berikan beberapa tips css typography sederhana.

The Font Attribute

CSS menyediakan "font attribute" sehingga dengan font attribute ini kita bisa merubah besar kecil huruf, menebalkan huruf, membuat tulisan menjadi bervariasi dan sebagainya.

Font-size

Ubah ukuran huruf menggunakan font-size

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;

Maka hasilnya menjadi seperti berikut ini :

1. Font size is set to 1.2em.
2. Font size is set to 12px.
3. Font size is set to 10pt.

Font-weight

Digunakan untuk merubah weight / bobot dari huruf. Misal : bold, bolder dsb.

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

Maka hasilnya menjadi seperti berikut ini :

1. Font weight is set to normal
2. Font weight is set to bold
3. Font weight is set to bolder
4. Font weight is set to lighter

Text-transform

Properti text-transform memungkinkin kita untuk merubah tulisan menjadi huruf besar semua atau kecil semua atau menjadi huruf kapital.

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;

Maka hasilnya menjadi seperti berikut ini :

1. capitalizes the first letter in every word
2. allows your html to be lower case the converts it all to uppercase characters
3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS
4. inherits the text-transform property from its parent element

Text-decoration

Properti text-decoration digunakan untuk memberikan efek garis bawah, garis atas maupun tulisan dengan efek seperti dicoret.

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink; (DO NOT USE)

Maka hasilnya menjadi seperti berikut ini :

1. Text decoration set to normal
2. Text decoration set to underline
3. Text decoration set to overline
4. Text decoration set to line-through
5. Text decoration set to blink ( Only works in Firefox and Opera )

Font-Variant

Properti font-variant digunakan untuk merubah tulisan menjadi kapital namun dalam ukuran tulisan normal

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

Maka hasilnya menjadi seperti berikut ini :

1. Font Variant set to normal
2. Font Variant set to small-caps
3. Font variant set to inherit

Membuat Drop Caps

Sangat mudah membuat drop caps dengan CSS. Banyak sekali cara untuk membuat drop caps ini tapi disini saya hanya akan memberikan contoh yang lebih mudah. Untuk membuatnya, kita menggunakan pseudo-element :first-letter dimana dengan elemen tersebut yang terkena efeknya adalah karakter pertama.

Untuk kode HTML nya sebagai berikut :

<p class="dropcaps">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

Sedangkan kode CSS nya adalah :

p.dropcaps:first-letter {
        font-size: 340%;
        margin: 8px 5px 0px 0px;
        float: left;
        font-weight: bold;
        width: 1em;
}

Maka hasilnya menjadi seperti berikut ini :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Membuat Paragraf yang Atraktif

Untuk membuat paragraf agar lebih menarik, kita bisa menggunakan metode Robert Bringhurst yaitu:

Ambillah ukuran font dan kalikan dengan 30 untuk mendapatkan lebar paragraf.

Sebagai contoh jika ukuran font kita adalah 12px, maka kalikan dengan 30 sehingga kita mendapatkan ukuran lebar 360px dengan perkiraan 65 karakter per baris.

Ukuran yang salah

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Ukuran yang tepat

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Contoh Line-height

"Line-height" digunakan untuk menentukan jumlah ruang di antara setiap baris teks. Aturan yang baik adalah untuk membuat line-height maka perkiraan ketinggian adalah 6-7px lebih besar dari ukuran font kita.
Sebagai contoh jika ukuran font kita adalah 12px, tambahkan 6px dengan ukuran font dan kita akan mendapatkan line-height 18px.

Line-height yang salah

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height yang tepat

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Membuat text terlihat bersih

Underlines digunakan hanya dalam text yang mengandung link yang menuju suatu objek atau suatu tempat. Sedangkan italic adalah alternative untuk text agar terlihat lebih bersih / rapi.

Contoh yang salah

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Contoh yang tepat

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Yang baru di CSS3

Dalam CSS3 banyak sekali fitur fitur yang menarik dimana fitur fitur tersebut dapat kita gunakan dalam mendesain sesuatu yang berhubungan tulisan. Namun sebagian fitur terbaru CSS3 ini tidak bekerja di IE, yah aku pikir sih gak apa juga, toh kita jarang menggunakan IE... ^^

@Font-face

@Font-face memungkinkan kita untuk menggunakan font yang kita buat sendiri atau font yang ada dalam komputer untuk digunakan di website maupun blog tetapi sebelumnya kita harus menguploadnya terlebih dahulu.

Dengan adanya @Font-face, ini merupakan awal yang bagus dalam hal typography namun kita tidak bisa menggunakan semua font yang ada karena masalah perijinan / lisensi. Untuk font yang bisa digunakan secara bebas kita bisa melihatnya di webfont.info dan Google web font.

Menggunakan @font-face
Dalam contoh ini, setelah kita mengupload font ke dalam server maka selanjutnya adalah mendeklarasikan atribut @Font-face agar bisa kita gunakan.

/* Declaring the font */

@font-face {
        src: (font/diavlo.otf)
}

/* Applying the font to an element */

h1 {
        font-family: diavlo, Arial;
}

Text-Shadow

Atribut text-shadow memungkinkan kita untuk membuat bayangan. Namun atribut ini hanya didukung di Safari, Chrome, Firefox dan Opera.

Example Heading

p {
        font-size: 2em;
        font-weight: bold;
        color: #777;
        text-shadow: 1px 1px 1px #222;
}

Example Heading 2

p {
        text-shadow: 2px 2px 2px #222;
}

Example Heading 3

p {
        text-shadow: 1px 1px 5px #FFF;
}

Nah, itulah beberapa tips sederhana untuk membuat text typography. Semoga artikel ini bermanfaat... ^^
Sumber : three{styles}

 *.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !