Cara mengatur jenis font pada css

belajar css

Font generic

Didalam CSS sendiri terdapat macam-macam jenis font. Ada banyak font yang tersedia untuk dipilih dari kumpulan font seperti font Google, font Adobe dan yang lainnya. Font generic sendiri merupakan keluarga font yang paling umum atau bisa dibilang font default, yang dimana hampir didukung pada setiap browser, Masalah dengan menggunakan nama font generik adalah bahwa desain halaman web Anda akan bergantung pada font yang ditetapkan oleh pengguna dalam pengaturannya. Berikut daftar font generic:

  • Serif
  • Sans-serif
  • cursive
  • monospace
  • fantasy

Deskripsi singkat font generic

serif: Sebagian besar digunakan ketika teks ditulis untuk tujuan pencetakan seperti buku, surat kabar, majalah, dll. Karakter teks dihiasi dengan goresan di akhir. Contoh serif font-family adalah Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, dll.

sans-serif: Gayanya modern, formal, dan simpel dalam penampilan. Tidak seperti “Serif” Itu tidak memiliki stroke di ujungnya. Ini memiliki berbagai penggunaan tetapi paling sering dalam bentuk teks digital. Contoh sans-serif adalah Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, dll.

cursive: Jenis font ini sebagian besar digunakan dalam surat undangan, pesan informal, berita utama, dll. Penampilannya seperti, teks tulisan tangan menggunakan pena atau kuas. Contoh font-family cursive adalah Flanella, Belluccia, Insolente, Corsiva, Zapfino, dll.

monospace: Digunakan untuk memberikan contoh, teks yang diketik, instruksi, alamat surat, contoh kode, dll. Setiap karakter teks memiliki lebar yang sama. Contoh font-family monospace adalah Kurir, konsol, Monako, SimSun, Terminal, Menlo, Inconsolata, dll.

fantasy: Digunakan untuk membuat teks lebih dekoratif, berdampak dan ekspresif. Jenis font ini harus digunakan dalam teks yang lebih pendek, karena tidak mudah untuk membacanya dengan mudah. Contoh keluarga font fantasi adalah Impact, Cracked, Critter, Studz, Copperplate, dll.

Contoh:

Editor Online
  1. p {
  2. font-size: 70px;
  3. margin: 10px 0;
  4. }
  5. #serif {
  6. font-family: serif;
  7. }
  8. #sans-serif {
  9. font-family: sans-serif;
  10. }
  11. #cursive {
  12. font-family: cursive;
  13. }
  14. #fantasy {
  15. font-family: fantasy;
  16. }
  17. #monospace {
  18. font-family: monospace;
  19. }

Font family

Dengan property font-family Anda bisa menggunakannya untuk merubah jenis font. Pada property font-family Anda harus memegang beberapa nama font sebagai sistem “fallback”. Ini sangat berguna jika browser tidak mendukung font pertama, ia mencoba font berikutnya dan seterusnya. Karena property font-family diwarisi oleh semua elemen HTML, Anda dapat menerapkan font untuk seluruh dokumen HTML dengan menerapkannya pada elemen <body>.

Jika nama font yang Anda pilih memiliki lebih dari satu kata, maka Anda harus membungkusnya dengan tanda kutip, seperti: “Times New Roman”, “Courier New” dan jika Anda menambahkan nama font lebih dari satu, maka harus dipisahkan dengan koma.

Contoh:

Editor Online
  1. body {
  2. font-family: Arial, Verdana, “Times New Roman”;
  3. }

Jika Anda sudah memilih font yang Anda inginkan yang bukan termasuk keluarga font generic, maka tambahkan font generik. Ini menjaga jika font yang Anda pilih tidak tersedia maka akan menggunakan font generic, yang dimana font generic hampir didukung disemua browser.

Menggunakan font dari google

Google Font adalah salah satu layanan yang meyediakan berbagai jenis font secara gratis. Anda dapat mengunjungi web: https://fonts.google.com/. Google font menyediakan lebih dari 952 jenis font yang bisa Anda gunakan, dan ini berlisensi gratis. Untuk menggunakannya silakan Anda ikuti langkah-langkah dibawah ini.

Langkah pertama:

kunjungi https://fonts.google.com/ dan pilih salah satu font yang akan Anda gunakan.

silakan pilih font yang akan digunakan

Pada contoh disini kita memilih nama font Grenze.

Langkah kedua:

Jika sudah silakan klik icon tambah. Lalu ambil link url fontnya.

<link href="https://fonts.googleapis.com/css?family=Grenze&display=swap rel="stylesheet">

Langkah ketiga:

Masukan didalam tag html <head></head>.

Lalu gunakan property font-family dan masukan nama font yang Anda pilih tadi.

Agar tidak bingung silakan lihat contoh ini, didalam editor online yang sudah disediakan:

Contoh:

Editor Online
  1. body {
  2. font-family: Grenze, serif;
  3. }

Contoh diatas menggunakan font external, mengambil script diluar situs kita, maka contoh diatas harus terkoneksi dengan internet.

Font style

Dengan property font-style Anda bisa menentukan gaya font untuk teks.

Property ini memiliki tiga nilai:

  • normal – Teks ditampilkan standar (default)
  • italic – Teks ditampilkan dalam huruf miring
  • oblique – Teks “bersandar” (oblique sangat mirip dengan italic, tapi kurang didukung)

Contoh:

Editor Online
  1. #normal {
  2. font-style: normal;
  3. }
  4. #italic {
  5. font-style: italic;
  6. }
  7. #oblique {
  8. font-style: oblique;
  9. }

Font size

Dengan property font-size Anda bisa menetapkan ukuran untuk teks. Namun, Anda tidak harus menggunakan penyesuaian ukuran font seperti, misalnya ingin membuat paragraf terlihat seperti pos atau heading (<h1> – <h6>).

Nilai font-size bisa menjadi ukuran absolut, atau relatif.

ukuran absolut:

  • Mengatur teks ke ukuran tertentu
  • Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
  • ukuran absolut berguna ketika ukuran fisik atau output layar diketahui

Ukuran relatif:

  • Mengatur ukuran relatif terhadap elemen sekitarnya
  • Memungkinkan pengguna untuk mengubah ukuran teks dalam browser

Contoh:

Editor Online
  1. p {
  2. font-size: 20px;
  3. }

Jika Anda tidak menentukan ukuran font, ukuran standar untuk teks normal, seperti paragraf adalah 16px (16px = 1em).

Ukuran font dengan pixel

Piksel (px): Piksel adalah unit ukuran tetap yang digunakan dalam media layar (yaitu untuk dibaca di layar komputer). Satu piksel sama dengan satu titik di layar komputer. Banyak perancang web menggunakan unit piksel dalam design webnya untuk menghasilkan representasi piksel sempurna. Satu masalah dengan unit pixel adalah bahwa ia tidak naik ke atas untuk pembaca tunanetra atau ke bawah agar sesuai dengan perangkat seluler.

Contoh:

Editor Online
  1. h1 {
  2. font-size: 50px;
  3. }
  4. p {
  5. font-size: 18px;
  6. }

Menentukan ukuran font dalam pixel tidak terlalu mudah diakses, karena pengguna tidak dapat mengubah ukuran font dari pengaturan browser. Misalnya, pengguna dengan penglihatan terbatas mungkin ingin mengatur ukuran font lebih besar dari ukuran yang Anda tentukan. Karena itu, Anda harus menghindari menggunakan nilai piksel untuk ukuran font jika Anda ingin membuat desain yang inklusif.

Ukuran font dengan em

Ems (em): “em” adalah unit yang dapat diskalakan, yang memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser). Em mengacu pada ukuran font elemen induk atau ukuran yang bersifat dinamis. Ketika mendefinisikan property font-size suatu em sama dengan ukuran font yang berlaku untuk induk elemen.

Jika Anda menetapkan font-size 20px pada elemen induk, lalu 1em = 20px dan 2em = 40px.

Jika Anda belum menetapkan ukuran font di mana pun di halaman, maka itu adalah default browser, yang mungkin 16px. Jadi, secara default 1em = 16px, dan 2em = 32px.

Contoh:

Editor Online
  1. h1 {
  2. font-size: 3em;
  3. }
  4. p {
  5. font-size: 1.2em;
  6. }

Sayangnya, masih ada masalah dengan versi IE, teks menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Kombinasi persen dan em

Solusi untuk mencapai efek yang sama di semua browser adalah dengan menetapkan standar property font-size dalam persentase untuk elemen <body>.

Teknik yang paling populer adalah mengatur property font-size pada elemen <body> lalu memberikan nilai untuk 62.5%(yaitu 62,5% dari standar 16px), yang setara dengan 10px, atau 0,625em.

Sekarang Anda dapat mengatur property font-size untuk setiap elemen menggunakan unit em, dengan konversi mudah diingat, dengan membagi px nilai dengan 10. Dengan cara ini 10px = 1em12px = 1.2em14px = 1.4em16px = 1.6em, dan seterusnya. 

Contoh:

Editor Online
  1. body {
  2. font-size: 62.5%;
  3. }
  4. h1 {
  5. font-size: 3.5em;
  6. }
  7. p {
  8. font-size: 1.6em;
  9. }

The World Wide Web konsorsium (W3C) merekomendasikan menggunakan em atau nilai persentase (%) dalam rangka menciptakan tata letak yang lebih kuat dan terukur.

Font weight

Dengan property font-weight Anda bisa menentukan berat atau ketelan pada font.

Kemungkinan nilai property untuk font-weight adalah: normalboldbolderlighter100200300400500600700800900dan inherit.

  • Nilai numerik 100– 900tentukan bobot font, di mana setiap angka mewakili bobot yang lebih gelap daripada pendahulunya. 400sama dengan normal700sama dengan bold.
  • Nilai bolderdan lighter relatif terhadap bobot font yang diwarisi, sedangkan nilai lainnya adalah bobot font absolut.

Contoh:

Editor Online
  1. #normal {
  2. font-weight: normal;
  3. }
  4. #light {
  5. font-weight: lighter;
  6. }
  7. #thick {
  8. font-weight: bold;
  9. }
  10. #thicker {
  11. font-weight: 900
  12. }

Jika font tidak tersedia dalam weight yang ditentukan, alternatif akan dipilih yang merupakan bobot terdekat yang tersedia.

Font variant

Dengan property font-variant Anda bisa menentukan sebuah teks ditampilkan dalam font small-caps. Dalam font small-caps, semua huruf kecil dikonversi ke huruf besar. Namun, huruf besar dikonversi dalam ukuran font lebih kecil dari huruf besar asli didalam teks.

Kemungkinan nilai property untuk font-variant adalah normalsmall-caps dan inherit.

Contoh:

Editor Online
  1. #normal {
  2. font-variant: normal;
  3. }
  4. #small {
  5. font-variant: small-caps;
  6. }

Daftar property fonts

PropertyKegunaanya
fontMenetapkan semua properti font dalam satu deklarasi
font-familyMenentukan jenis font untuk teks
font-styleMenentukan gaya font untuk teks
font-sizeMenentukan ukuran font untuk teks
font-weightMenentukan berat atau ketebelan sebuah font
font-variantMenentukan apakah teks harus ditampilkan dalam huruf kecil

Leave a Reply

Your email address will not be published. Required fields are marked *