Bagaimana cara mengubah ukuran teks menggunakan html?

Besar huruf (font size) merupakan ukuran yang diterapkan pada huruf (font) di dalam suatu halaman HTML dengan satuan tertentu. Ukuran font standart secara default pada halaman HTML adalah 16px. Dan ukuran tersebut berlaku bagi seluruh elemen HTML baik itu dalam bentuk block maupun inline-block dengan pengecualian heading H1 sampai dengan H6.

Ukuran standart tersebut dapat dijadikan sebagai acuan di dalam melakukan desain halaman web. Namun terkadang kita menjumpai jenis font yang mempunyai tampilan visual sangat kecil dan mungil jika dibandingkan tampilan visual font lainnya dengan ukuran font yang sama. Misalnya pada font mistral dari keluarga cursive jika dibandingkan jenis arial dari keluarga serif akan terlihat jelas perbandingan ukuran visualnya, dimana font yang satu besar dan satunya lagi lebih kecil.

Pengaturan ukuran huruf juga berlaku dalam menata struktur pada halaman HTML. Di mana struktur halaman biasanya memiliki judul, sub judul, bagian deskripsi dan juga bagian catatan kaki (footer). Setiap bagian struktur halaman akan memiliki ukuran besar huruf yang berbeda-beda. Misalnya bagian judul menggunakan besar huruf 24px, bagian sub judul menggunakan 20px, bagian deskripsi menggunakan ukuran standart yaitu 16px dan bagian footer menggunakan font dengan ukuran yag lebih kecil dari bagian deskripsi.

Property 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.

Properti font-size menerima berbagai input (masukan) yang merupakan satuan dalam menentukan nilai ukuran besar huruf. Seperti nilai dengan satuan ukuran angka, persentase, ukuran small, smaller, larger dan lainnya.

Cara penulisan sintaks properti :

font-size: number | % | medium | xx-small | x-small | small | smaller | xx-large | x-large | large | larger | inherit;

Nilai number merupakan nilai besar huruf dalam bentuk satuan angka. Ukuran satuan yang diterima seperti px, pt, pc, mm, em dan lainnya. Nilai inherit merupakan nilai yang mengikuti ukuran besar huruf pada elemen induknya.

Sebagai contoh misalnya :

font-size: 20px;
font-size: 16pt;
font-size: 10mm;
font-size: 100%;
font-size: medium;
font-size: larger;

Mengatur Ukuran Besar Huruf Pada Satuan Absolute

Ukuran besar huruf dalam bentuk nilai absolute merupakan ukuran dengan nilai yang sudah baku dan tidak berubah berdasarkan nilai pada elemen induk atau elemen HTML lain di sekelilingnya.

Satuan medium | xx-small | x-small | small | xx-large | x-large | large

Nilai satuan ukuran besar huruf dalam bentuk medium, small, x-small, xx-small, large, x-large dan xx-large semuanya merupakan nilai dalam bentuk satuan absolute dengan nilai yang tetap. Walaupun ditetapkan dalam bentuk tulisan, namun nilai yang terkandung di dalamnya memiliki padanan nilai tersendiri dengan nilai yang mutlak.

Nilai medium atau nilai tengah mengambil nilai default dari ukuran besar huruf halaman HTML yaitu 16px. Sedangkan nilai lainnya memiliki ukuran tersendiri yang berbeda jika dikonversi pada satuan ukuran px (pixel).

Ukuran SatuanDalam Satuan px (pixel)xx-small9pxx-small10pxsmall13pxmedium16pxlarge18pxx-large24pxxx-large32px

Berikut contoh pengaturan besar huruf-nya :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22



Font Size CSS


Contoh Huruf Font ukuran x-small.

Contoh Huruf Font ukuran x-small.

Contoh Huruf Font ukuran small.

Contoh Huruf Font ukuran Medium.Ukuran normal

Contoh Huruf Font ukuran large.

Contoh Huruf Font ukuran x-large.

Contoh Huruf Font ukuran xx-large.



Hasil Script :

Contoh Huruf Font ukuran x-small.

Contoh Huruf Font ukuran x-small.

Contoh Huruf Font ukuran small.

Contoh Huruf Font ukuran Medium

Contoh Huruf Font ukuran large.

Contoh Huruf Font ukuran x-large.

Contoh Huruf Font ukuran xx-large.

Satuan px (pixel)

Satuan px (pixel) merupakan satuan yang paling banyak digunakan untuk berbagai macam keperluan pengukuran, baik itu ukuran besar huruf maupun pengukuran lainnya seperti tinggi, lebar dan dimensi pada elemen HTML. Nilai satuan px berdasarkan jarak titik pixel satu dengan lainnya pada layar secara visual. Satuan px (pixel) secara normatif didefinisikan sebagai 1/96 dari 1 inch.

Contoh berikut menggunakan nilai px dalam beberapa nilai yang berbeda :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21



Font Size CSS



   

Ukuran font : 12px

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus.


   

Ukuran font : 16px

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus.


   

Ukuran font : 22px

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus.



Bagaimana cara mengubah ukuran teks menggunakan html?

Satuan mm, cm, in

Satuan mm (millimeter), cm (centimeter) dan in (inches) merupakan satuan absolute yang dapat digunakan untuk menetapkan ukuran besar huruf berdasarkan satuan tersebut. Satuan ini sebenarnya diperuntukkan pada pengukuran pada piranti cetakan seperti printer. Penggunaan satuan ini pada halaman HTML mungkin akan menghasilkan nilai yang tidak begitu akurat sesuai dengan nilai standart satuannya.

Berikut contoh penggunaan satuan ini dengan nilai yang berbeda :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29



Font Size CSS



   

Ukuran font : 4mm, 6mm, 8mm

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

   

Ukuran font : .3cm, .5cm, .7cm

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

   

Ukuran font : .1in, .3in, .5in

Itaque earum rerum hic tenetur a sapiente delectus..

Itaque earum rerum hic tenetur a sapiente delectus..

Itaque earum rerum hic tenetur a sapiente delectus..



Hasil Script :

Ukuran font : 4mm, 6mm, 8mm,

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ukuran font : .3cm, .5cm, .7cm

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis..

Ukuran font : .1in, .3in, .5in

Itaque earum rerum hic tenetur a sapiente delectus..

Itaque earum rerum hic tenetur a sapiente delectus..

Itaque earum rerum hic tenetur a sapiente delectus..

Mengatur Ukuran Besar Huruf Pada Satuan Relative

Satuan relative merupakan satuan dengan nilai tidak tetap yang mengacu pada nilai satuan elemen lain di sekitarnya atau induknya. Jika ukuran yang bersifat absolute memiliki nilai baku dan tidak berubah, namun pada satuan relatif memiliki nilai yang akan selalu berubah sesuai dengan nilai yang ditetapkan pada elemen induknya.

Nilai dalam satuan relative menggunakan nilai dalam bentuk bilangan persentase tertentu sebagai pembanding dengan nilai pada elemen induknya.

Satuan smaller | larger

Satuan smaller merupakan satuan yang bersifat relative terhadap elemen induknya. Sesuai dengan namanya yaitu smaller yang artinya lebih kecil, nilai ini akan lebih kecil dari elemen induknya. Perhitungan nilai smaller tepatnya adalah 1/1.2 = 0.83 lebih kecil dari nilai pada elemen induknya. Misalnya nilai elemen induknya adalah 20px, maka nilai smaller-nya adalah 16.67px.

Satuan larger adalah kebalikan smaller yang artinya lebih besar. Nilai ini akan lebih besar dari elemen induknya. Perhitungan nilai larger adalah 1 x 1.2 = 1.2 lebih besar dari nilai pada elemen induknya. Misalnya nilai elemen induknya adalah 20px, maka nilai larger-nya adalah 24px.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



Font Size CSS



   

Ukuran Huruf Elemen Induk : 24px

Contoh Huruf Elemen Anak smaller.

Contoh Huruf Elemen Anak larger.


   



Silahkan geser slider untuk mendapatkan nilai besar huruf secara aktual. Dan bandingkan antara ukuran huruf pada elemen induk dengan elemen anaknya dalam nilai smaller dan nilai larger-nya. Nilai pada elemen anak akan mengikuti besaran nilai pada elemen induknya.

Hasil Script :

Ukuran Huruf Elemen Induk : 24px

Contoh Huruf Elemen Anak smaller.

Contoh Huruf Elemen Anak larger.

Satuan % (persentase)

Satuan % (persentase) merupakan satuan relative yang memiliki nilai satuan dengan membandingkan nilai pada elemen induknya. Misalnya jika ukuran besar huruf pada elemen anak memiliki nilai 90% artinya nilai aktual dari elemen anak tersebut adalah 90% dari nilai pada elemen induknya.

Jika elemen induknya memiliki satuan sebesar 22px, maka nilai aktual elemen anaknya adalah 1.5em x 22px = 33px. Berikut contoh penggunaan satuan dalam bentuk em :

Bagaimana langkah langkah dalam mengubah ukuran teks atau tulisan?

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 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.

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.

Properti apa yang digunakan untuk merubah ukuran huruf pada CSS?

Properti 'font-size' digunakan untuk mengontrol ukuran font. Nilai yang biasanya digunakan adalah xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam piksel atau dalam %.