Cara mengatur ukuran text di html

Question

Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML dengan CSS. Property CSS yang akan kita gunakan adalah font-size.

Table of Contents Show

Mengenal Property font-size
Table Of Contents
#1 Cara Mengubah Jenis Font
#2 Cara Mengubah Warna Font
#3 Cara Mengubah Ukuran Font
Menarik Kesimpulan
Bagaimana cara mengatur jenis dan ukuran huruf?
Apa itu font size pada CSS?
Apa tag HTML yang benar untuk membuat teks berukuran besar?
Font Family apa saja?

Mengenal Property font-size

Untuk mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size. Properti font-size cukup sederhana dan ditulis seperti contoh berikut ini:

p {
   font-size: 14px;
}

Dengan menulis kode CSS diatas, semua teks di dalam tag akan memiliki font dengan ukuran 14 pixel.

Yang membuat menarik (dan juga memusingkan) adalah CSS menyediakan banyak “satuan ukuran” teks yang bisa dipilih, dimulai dari pixel seperti contoh diatas, keyword seperti small, medium, large, ukuran satuan persen, em, dan juga ukuran lain seperti cm, mm, pt, dan pica.

Ukuran satuan cm, mm, pt dan pica berasal dari media cetak seperti koran dan majalah. Satuan ini cocok untuk media yang bersifat pasti (dimana kita bisa menentukan sendiri ukuran kertas yang akan digunakan). Namun satuan ukuran tersebut tidak cocok di dalam media elektronik seperti web. Karena media yang digunakan oleh pengunjung web bisa bermacam-macam mulai dari smartphone dengan lebar layar 2 inchi sampai dengan monitor desktop 20 inchi atau lebih. Satuan ukuran cm, mm, pt dan pica menjadi tidak relevan, sehingga jarang digunakan.

Dalam contoh diatas, untuk paragraf pertama dengan class=”satu” saya membuat ukuran text sebesar 100%. Karena tag <body> yang berfungsi sebagai parent element tidak memiliki ukuran text, maka ukuran 100% jatuh kepada base text size web browser yang berukuran 16pixel. Paragraf kedua saya buat berukuran 16px sebagai perbandingan.

Untuk paragraf ketiga, saya membuat ukurannya sebesar 80%. Sehingga ukuran teks menjadi 80%*16px=12.8px.

Di dalam paragraf ketiga, terdapat tag yang juga memiliki ukuran font sebesar 80%. Namun karena parent elemen dari tag adalah tag , maka ukuran akhir fontnya di dapat dari perhitungan 80%*12.8px=10.24px. Saya sengaja mengubah warna font menjadi biru untuk menandakan bagian tag yang jika diperhatikan berukuran lebih kecil dibandingkan tag ketiga, walaupun ukuran teks sama-sama di set sebesar 80%.

Contoh kode CSS dan HTML diatas hampir sama dengan contoh yang kita gunakan dalam contoh satuan persen. Namun perhatikan bahwa saya mendefenisikan ukuran font untuk tag <body> sebesar 14px, sehingga tag lain yang menggunakan satuan em akan menyesuaikan ukuran dengan patokan base font 14px.

Karena satuan em akan menggunakan parent element sebagai rujukan ukuran font, maka ukuran tag <body> sebesar 14px akan menjadi ukuran dasar untuk semua tag. Dengan menggunakan cara seperti ini saya dapat dengan mudah mengubah ukuran font untuk seluruh halaman dengan tetap mempertahankan ukuran proporsional nya. Lebih jauh lagi, konsep ini juga menjadi salah satu dasar pembuatan layout responsive (Responsive Web Design)

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Ketika kita membuka sebuah halaman website, tak jarang kita menemukan ukuran dan bentuk huruf atau tulisan dari masing-masing website tersebut.

Lalu, bagaimana hal ini bisa terjadi?

Font adalah jenis huruf yang ada pada sebuah dokumen

Berbagai jenis font dan bisa dipergunakan sesuai dengan desain yang diinginkan tapi memang font yang akan ditampilkan pada web browser sepertinya adalah berasal dari komputer user atau pengunjung web.

Apabila font yang dipilih tersebut tidak standar, maka desain yang telah dirancang serapih mungkin kemungkinan akan kacau dikarenakan font tersebut yang dipilih tadi tidak tersedia.

Pada artikel kali ini saya ingin membahas bagaimana cara mengubah font pada html:

#1 Cara Mengubah Jenis Font

Agar Anda dapat menentukan jenis font dari sebuah teks html maka Anda dapat mempergunakan salah satu dari pada property CSS yaitu font-family. Adapun penulisannya bisa dilihat dari contoh berikut:

<style type="text/css">;
    body { font-family: Arial; }
    p { font-family: Courier, monospace; }
    div { font-family: Duru Sans, Verdana, sans-serif; }
</style>

Seperti yang bisa anda lihat, disana terdapat nilai yang didukung oleh properti family berupa nama-nama font yang diinginkan oleh developer.

Contoh Penggunaan Font-Family

Berikut adalah contoh penggunaan properti font-family dalam CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

Dari kode diatas maka akan menghasilkan halaman program seperti gambar di bawah ini

Penjelasan:

Pada tag body ini terdapat font-family dengan type font Calibri, Helvetica, Arial, sans-serif
Pada tag h3 mempunyai jenis font Cambria,"Times New Roman",serif;

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

0 – mengartikan jika id dengan nama

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

1 mempunyai pengaturan font-family dengan format Georgia, serif;

#2 Cara Mengubah Warna Font

Untuk mengubah warna kita membutuhkan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

2. Berikut contoh penulisannya:

<style type="text/css">;
    h3 { color: red }
    p { color: blue }
</style>

Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

4 akan berwarna biru.

Silahkan coba kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 { color: red }
        p { color: blue }
    </style>
</head>
<body>
    <h3>Contoh Tulisan Warna Merah</h3>
    <p>
        <strong>Contoh Tulisan</strong> Berwarna Biru
    </p>
</body>
</html>

#3 Cara Mengubah Ukuran Font

Sedangkan untuk mengubah ukuran font kita membutuhkan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

5. Berikut contoh penulisannya:

<style type="text/css">;
    h3 { font-size: red }
    p { font-size: blue }
</style>

Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

4 akan berwarna biru.

Silahkan coba kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 { font-size: 12px }
        p { font-size: 16px }
    </style>
</head>
<body>
    <h3>Contoh tulisan berukuran 12px</h3>
    <p>
        <strong>Contoh Tulisan</strong> berukuran 16px
    </p>
</body>
</html>

Menarik Kesimpulan

Jadi untuk mengubah warna font kita memerlukan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

2, untuk mengubah jenis font kita memerlukan atribut font-family, sedangkan untuk mengubah ukuran font kita mebutuhkan

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

5.

Mari kita rangkum kode diatas menjadi contoh sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 {
            font-size: 12px;
            color: red;
            font-family: Calibri, Helvetica, Arial, sans-serif;
        }
        p {
            font-size: 16px;
            color: blue;
            font-family: Cambria,"Times New Roman",serif;
        }
    </style>
</head>
<body>
    <h3>Contoh tulisan berukuran 12px berwarna merah menggunakan font calibri</h3>
    <p>
        <strong>Contoh Tulisan</strong> berukuran 16px berwarna biru menggunakan font cambria
    </p>
</body>
</html>

Catatan: dalam artikel ini saya menggunakan internal css untuk mengubah font, sebenarnya anda juga bisa menggunakan external css, maupun inline-css.

(Silahkan Baca: Perbedaan Internal-css, External-css, dan Inline-css)

Demikian adalah ulasan tentang cara mengubah font di html semoga informasi di atas dapat bermanfaat. Jangan lewatkan seri panduan belajar HTML kami.

Bagaimana cara mengatur jenis dan ukuran huruf?

Mengubah ukuran teks yang dipilih.

Pilih teks atau sel dengan teks yang ingin Anda ubah. Untuk memilih semua teks dalam dokumen Word, tekan Ctrl + A..

Di tab Beranda, klik ukuran font dalam kotak Ukuran Font. Anda juga dapat mengetikkan ukuran yang diinginkan, dalam batasan berikut ini:.

Apa itu font size pada CSS?

Font size pada CSS merupakan properti yang digunakan untuk mengatur ukuran besar huruf pada suatu elemen HTML. Dengan properti ini, maka ukuran teks pada elemen tersebut dapat diatur sesuai dengan keperluan.

Apa tag HTML yang benar untuk membuat teks berukuran besar?

Tag h1 adalah tag heading pada HTML yang memiliki ukuran huruf terbesar. Ukuran font pada h1 secara default adalah 2em atau 2 kali ukuran font yang sedang digunakan di halaman tersebut.