CSSMateri CourseNusantech Academy

Modul 3-5. CSS Font and Text

By 13 Mei 2020 Juni 3rd, 2020 No Comments

Apa kabar teman-teman Nusantech? Pasti masih semangat kan. Kali ini kita akan akan bahas mengenai pengaturan Font dan Text CSS nih. Kita pasti tidak mau kan kalau Font dan Text yang kita tulis terlihat monoton dan kurang menarik. So, apa yang mesti kita lakukan? Ayo cari tahu.

Font & Text

Pertama, apa sih Font dan Text itu?

Menurut Wikipedia, Font/tipografi merupakan sebuah rupa huruf yang memiliki ukuran, berat, dan gaya tertentu. Sedangkan Text adalah objek apa saja yang dapat kita baca, baik tulisan, karya sastra, palang-palang dijalan dan lain sebagainya. 

Didalam pemrograman HTML & CSS kita mengenal 5 jenis Font standar yang digunakan secara umum. 

  • Serif

Font yang sering kita lihat di surat-surat resmi biasanya menggunakan jenis Font Serif. Ciri khas font serif yakni memiliki akhiran seperti kaki/kait di setiap hurufnya, contoh jenis Font Serif: Times New Roman dan Georgia  .

  • Sans-Serif

Kebalikan dari Serif, Sans-serif tidak memiliki kait/kaki di akhiran hurufnya. Contoh: Arial, Calibri, Versa, dan Halvetica.

  • Monospace

Kalau kita sering ngoding, pasti familiar dengan Font yang satu ini. Ya, Monospace adalah jenis Font yang sering dipakai dalam Text editor/console pemrograman. Bentuknya terlihat konsisten antara panjang huruf dan space tiap paragraf. Contoh: Courier, Courier New, dan Lucida Console.

  • Fantasy

Fantasy seperti namanya, jenis Font ini memiliki ciri khas dari bentuk yang unik dan tidak biasa, serta terkesan bebas. Fantasy tidak terlalu banyak digunakan dalam pembuatan website dan lebih banyak dipakai pada desain grafis  karena jenis font ini pada dasarnya agak sulit dibaca. Contoh: Impact, Desdemona, dan Kini.

  • Cursive

Cursive adalah jenis Font yang murip tulisan tangan/handwriting. Contoh: Bradley Hand, French Script, dan Edwardian Script.

Terus bagaimana cara kita mengatur Font dan Text dalam CSS?

Pada course sebelumnya kita sudah mengenal Property Color. Kegunaan dari Property Color sendiri adalah merubah warna dari text-text HTML. Nah sekarang, kita bakal mengenal beberapa Property CSS lain yang digunakan untuk mengatur Font dan Text CSS.

Property Font

Font adalah Property yang mengatur jenis, ketebalan, ukuran, dan variasi huruf.

Sintaks:

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Contoh penggunaan:

body {
    font: 12px, Arial, sans-serif;
    font: italic small-caps bold 12px/20px "Times New Roman", serif;
}

font merupakan property gabungan/shorthand dari beberapa property CSS berikut ini

  • font-family

font-family berfungsi untuk mengubah jenis font dari sebuah elemen. font-family diperlukan dalam pendeklarasian property font. Jika nilai dari font-family tidak ditemukan dalam property font yang dideklarasikan, maka property font akan mengambil nilai bawaan. 

Sintaks

font-family: family-name|generic-family|initial|inherit;

Contoh penggunaan:

body {
    font-family: Arial; // atau
    font-family: Arial, "Calibri", Halvetica, sans-serif;  
}

Maksud dari contoh diatas adalah apabila di perangkat kita tidak terdapat Font Arial maka Font yang pilih adalah Font Calibri, dan seterusnya, jika tetap tidak ada maka jenis Font generik Sans-serif bebas yang akan dipilih.

  • font-style

Font-style berfungsi mengatur apakah style sebuah Font normal, italic, atau oblique. Ada yang menarik dari italic dan oblique, keduanya sama sama berfungsi memiringkan Text. Perbedaannya, italic menggunakan file Font yang berbeda dari Font-family yang sama, sedangkan oblique memiringkan Font dari file Font yang sama. Agak membingungkan memang, tapi tidak apa, teman-teman bebas pakai yang mana, karena keduanya juga tidak beda jauh.

Sintaks

font-style: normal|italic|oblique|initial|inherit;

Contoh penggunaan:

font-style: normal;

ont-style: oblique;

font-style: oblique 11deg; // deg : nilai kemiringan

  • font-variant

Biasa digunakan untuk mengatur tampilan huruf agar menampilkan efek Small-cap. Small-cap merupakan huruf kapital yang berukuran kecil.

Sintaks

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

Contoh penggunaan:

body {
    font-variant: small-caps;
}

Font-weight

Font-weight digunakan menentukan ketebalan jenis huruf yang akan digunakan

Sintaks

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Nilai number berkisar antara 100 – 900

Contoh penggunaan:

body {
    font-weight: bold;
    font-weight: 600;
}
  • Font-size

Font-size berfungsi mengatur ukuran Font. Sama seperti Font-family, Font-size juga akan mengambil nilai bawaan jika dalam Property Font kita tidak ditemukan nilai Font-size.

Sintaks

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Contoh penggunaan:

body {
    font-size: 12px;
    font-size: 50%;
    font-size: medium;
}

Property Text

Agar tampilan web kita tapi dan teratur kita dapat memanipulasi text dan paragraf. Di dalam memanipulasi elemen text, kita dapat mengatur spasi antar kata/ baris, perataan paragraf, dan transformasi text.

Pemgaturan text/paragraf ini terbagi dalam beberapa property dasar:

  • text-align

property text-align digunakan untuk mengatur perataan text atau paragraf didalam sebuah elemen. 

Sintaks

text-align: left|right|center|justify|initial|inherit;

Contoh penggunaan:

body {
    text-align: center;
}
  • line-height

Dalam satu paragraf pastinya ada jarak antar baris, jarak tersebut dapat diatur menggunakan line-height

Sintaks

line-height: normal|number|length|initial|inherit;

Contoh penggunaan:

div {
    line-height: 1.6;
    line-height: 90%;
}
  • text-transform

Mungkin ketika kita menginginkan sebuah text agar dirender dalam bentuk uppercase, lowercase, atau kapital maka bisa memakai property text-transform

Sintaks

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Contoh penggunaan:

div {
    text-transform: uppercase;
}
  • text-indent

Digunakan untuk menentukan jarak spasi diserap akhiran kata.

Sintaks

text-indent: length|initial|inherit;

Contoh penggunaan:

div {
    text-indent: 5px;
    text-indent: 70%;
    text-indent: 3em;
}
  • text-decoration

text-decoration merupakan shorthand dari property text-decoration-line, text-decoration-color, dan text-decoration-style. Fungsinya menambahkan atau menghilangkan garis seperti underline di elemen anchor.

Sintaks

text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;

Nilai tiap property:

  • text-decoration-line: none|underline|overline|line-through|initial|inherit;
  • text-decoration-color: color|initial|inherit;
  • text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

Contoh penggunaan:

div {
    text-decoration: solid blue underline overline;
    text-decoration: wavy underline;
}
  • text-shadow

Kadang beberapa text memerlukan efek-efek fancy seperti bayangan. text-shadow berguna untuk memberi efek bayang-bayang.

Sintaks

text-shadow: offset-x | offset-y | blur-radius | color

Contoh penggunaan:

div {
    text-shadow: 1px 1px 4px #FF0000;
}
  • word-spacing & letter-spacing

Fungsi dari word-spacing dan letter-spacing sama-sama memberikan jarak. word-spacing memberikan jarak antar kata, sedangkan letter-spacing memberikan jarak antar huruf.

Sintaks

letter-spacing/word-spacing: normal|length|initial|inherit;

Contoh penggunaan:

div {
    word-spacing: 4em;
    letter-spacing: 5px;
}

Penutup

Selamat, kali ini teman-teman sudah mengetahui property CSS mengenai Font & Text. Sebenarnya masih banyak lagi property-property mengenai pengaturan font dan text dalam CSS. Bagi Teman-teman yang penasaran, boleh mencari tahu dan bereksperimen sendiri. Atau kalau ada yang ingin ditanyakan silahkan tulis di kolom komentar, oke?

Next, di pembahasan berikutnya kita akan bahas mengenai dasar-dasar List dan Table. Terus ikuti course ini ya.

Semangat, See you next time!

Leave a Reply