Ukuran Font CSS: px, rem, em, Kata Kunci, dan Contoh

Cara mengatur ukuran font di CSS

Properti font-size mengatur ukuran teks. Taruh di elemen mana saja, dan setiap teks di dalamnya mewarisi ukuran itu, kecuali anaknya mengatur ukurannya sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Untuk mengubah ukuran font di HTML, kamu tetap memakai CSS. Tambahkan atribut style (<p style="font-size: 20px;">) atau aturan di stylesheet. Tag <font size="5"> dari tahun 1990-an sudah usang dan tidak punya tempat di halaman modern.

Satuan yang diterima font-size

Ketik sebuah nilai dan lihat ukuran yang dihitung browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba 20px, 2em, 150%, x-large, smaller, dan 5vw. Nilai yang tidak valid, seperti big, diabaikan dan teksnya tetap memakai ukuran valid terakhir.

rem vs em: perbedaan yang sering menjebak

rem selalu melihat elemen root, jadi 1.2rem berukuran sama di mana pun ia muncul. em melihat induknya, jadi ukurannya berlipat saat elemen bersarang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Kotak em paling dalam berukuran 16 × 1.2 × 1.2 × 1.2 = 27.648px. Kotak rem paling dalam tetap 19.2px. Efek berlipat ganda itu berguna untuk komponen yang bagian-bagiannya harus berubah skala bersama, dan mengejutkan di tempat lain. Halaman satuan membandingkan setiap satuan panjang.

Kata kunci: xx-small sampai xx-large

Kata kunci absolut dipetakan ke skala tetap di sekitar medium, yang sama dengan ukuran default pengguna (16px kecuali mereka mengubahnya):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Dengan default 16px, small adalah 13px, large 18px, x-large 24px, dan xx-large 32px. Kata kunci cocok untuk pekerjaan cepat, tetapi sebuah design system biasanya ingin skalanya sendiri dalam rem.

Ukuran font fluid dengan clamp()

Judul yang harus membesar mengikuti layar tetapi tidak pernah terlalu kecil atau terlalu besar cukup ditulis dengan satu panggilan clamp(): minimum, ukuran yang diinginkan yang berubah skala, dan maksimum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

Di pratinjau selebar 800px, 5vw sama dengan 40px, yang berada di antara 24px dan 48px, jadi nilai itulah yang dipakai. Halaman clamp membahas tipografi fluid secara mendalam.

Mengatur ukuran dasar untuk seluruh halaman

Atur ukurannya sekali di body (atau html) dan atur ukuran lain relatif terhadapnya:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Hindari trik html { font-size: 62.5%; } kecuali setiap ukuran di halaman kemudian diatur dalam rem, dan jangan pernah mengatur ukuran px tetap pada html: ukuran itu menimpa ukuran font yang dipilih pembaca di browser-nya, yang bagi sebagian orang adalah satu-satunya cara agar bisa membaca.

Catatan aksesibilitas

• Teks isi berukuran 16px atau lebih adalah batas bawah yang baik untuk membaca di layar.
• Ukuran dalam rem dan em mengikuti pengaturan font default pengguna. Ukuran dalam px mengikuti zoom halaman, tetapi tidak mengikuti pengaturan itu.
• Di iPhone, Safari memperbesar halaman saat kamu memfokuskan input yang ukuran font-nya di bawah 16px. Beri field form font-size: 1rem atau lebih untuk menghindarinya.

Kesalahan umum

• Memakai tag <font>. Tag ini sudah usang. Pakai properti font-size.
• Ukuran em bersarang yang membesar atau mengecil tak terkendali. Pakai rem kecuali kamu memang ingin efek berlipat.
• Ukuran px tetap pada html. Ukuran itu menimpa pengaturan font milik pembaca.
• Lupa bahwa heading sudah punya ukuran. <h1> secara default berukuran 2em, jadi h1 { font-size: 1em; } diperlukan jika kamu ingin ukurannya sama dengan teks isi.
• Hanya memakai satuan viewport. font-size: 3vw menjadi tidak terbaca di ponsel dan raksasa di monitor lebar. Bungkus dengan clamp().