Apa itu font size css?

The CSS font-size property sets the font size of any text element on your page or website. The font-size property can be applied to any class, ID, or element that includes text content. The property accepts values in px, em, rem, vw, vh, and using keywords.

Table of Contents Show

Find Your Bootcamp Match
CSS h1 { font-size: 28px; } p ( font-size: 12px; }0
Set Font Size Using Pixels
Set Font Size Using ems
Set Font Size Using Root em
Set Font Size Using Keywords
Set Font Size Using Viewport Units
Apa itu font size HTML?
Apa itu font style pada CSS?
Apa arti property font size dalam CSS?

Most developers use a combination of different font sizes to style a web page. For instance, a web developer may use a large font for headings, and a smaller font for body text and others. So many ask: how do you change the font size in CSS or HTML?

The CSS font-size property allows developers to set the font size in a paragraph or line of text on a web page.

Find Your Bootcamp Match

Career Karma matches you with top tech bootcamps
Access exclusive scholarships and prep courses

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

This tutorial discusses, with reference to examples, how to use the font-size property. Going through this guide allows you to be an expert at changing text sizes.

CSS h1 { font-size: 28px; } p ( font-size: 12px; }0

Appropriate font styling is an important part of web design. Unstyled text causes reading difficulty among visitors, which almost certainly results in an unpleasant website experience.

There are many CSS styles for fonts that can be used to customize how text appears, like font-weight , font-family , text-decoration , and color . Another important property is font-size, which controls the size of a font in a block of text.

The syntax for the CSS font-size property is:

font-size: sizeValue;

h1 { font-size: 28px; }
p ( font-size: 12px; }

2 is the font size you want a block of text to use. There are a number of ways to specify the font size used by a block of text. The methods we are going to discuss in this article are:

pixels
em
root em
viewport units
keywords

Let us explore an example of how to use each font size approach on a web page.

Set Font Size Using Pixels

One of the most common ways to set the size of a font is to use pixels.

Pixels are a good unit of measurement because they allow you to be precise. The pixel unit is largely unaffected by operating systems or web browsers. A pixel on one screen is a pixel on another. The pixel value you specify will roughly appear the same way across different browsers.

However, using pixels to set the size of a font in a block of text does have one limitation: accessibility. Font sizes defined using pixels are not accessible because some browsers do not allow users to customize the font size. Visually impaired users, for example, may struggle to use a site that uses pixels to define font sizes.

Let’s say we’re creating a website with a font size of

h1 { font-size: 28px; }
p ( font-size: 12px; }

3 for all

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 elements and

h1 { font-size: 28px; }
p ( font-size: 12px; }

5 for all

h1 { font-size: 28px; }
p ( font-size: 12px; }

6 elements. We could use the following code to accomplish this task:

h1 { font-size: 28px; }
p ( font-size: 12px; }

In our code, we have used a CSS selector set the font size of all

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 elements to

h1 { font-size: 28px; }
p ( font-size: 12px; }

3 and all

h1 { font-size: 28px; }
p ( font-size: 12px; }

6 elements to

h1 { font-size: 28px; }
p ( font-size: 12px; }

5 . The following snippet shows how these elements appear with our new font sizes:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

Click the

button in top-right corner of the window above to run the code.

Set Font Size Using ems

Another common way of setting the size of a font in CSS is to use em sizes. The em unit of measurement refers to the font size of a parent element. If you set a font’s size to

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

1 , the font size will be twice that of the parent element.

An Example of CSS Font Sizing with ems

For example, suppose you have a paragraph of text stored in a box. The font size of the box is

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

2 . If you specified the font size of the paragraph of text to be

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

3 , the font size of the paragraph would be

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

2 . This is the same as the parent element’s font size.

If you have not set a font size for a parent element, the browser will use the default value specified for that browser. This is usually

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 . As a result, if you have not specified any font sizes,

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

3 is by default

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 ,

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

1 is by default

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

9 .

Suppose the font size of our web page is

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 . We want all paragraphs of text to appear using that font size, which means we should use the value

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

3 . Also, we want all of our headings to appear with a font size of

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 , which is equal to

p { font-size: 1em; }
h1 { font-size: 1.5em; }

3 .

We could use the following code to accomplish this task:

p { font-size: 1em; }
h1 { font-size: 1.5em; }

In our code, the size of all paragraphs will be

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 (

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

3 =

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 by default), and all

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 elements will be

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 (

p { font-size: 1em; }
h1 { font-size: 1.5em; }

3 =

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 ).

Here is how our text would appear on the web page:

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

In the above example, you can see the new styles for both our

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 and

h1 { font-size: 28px; }
p ( font-size: 12px; }

6 elements.

You should note that if our

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 appeared within a box which had another font size, the size of our

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 would change. This is because em values inherit the font size of their parents.

Set Font Size Using Root em

Short for root em,

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 is a new unit of measurement introduced in CSS3 that can be used to set font size. Values using

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 are relative to the root

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

7 element, instead of the parent element.

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 values are useful because they allow you to specify a value relative to the entire document. This way, the size of your text won’t be affected if the parent element has a different em value.

Suppose we have a web page with the default font size of

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 . Like in our previous example, we want all

h1 { font-size: 28px; }
p ( font-size: 12px; }

4 s to appear in

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 and all paragraphs to appear in

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 . We could set these font sizes using the following code:

<style>
  p { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

Our code is almost the same as in our previous example. The only difference is that the unit of measurement we use is

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 instead of

<style>
  p { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

4 . In this example, our font sizes will still be

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 and

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 for the top-level headings and paragraphs, respectively. That’s because the default font size of our web page is

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 .

Set Font Size Using Keywords

There are two types of keywords you can use to set the size of a font in CSS.

Absolute keywords are used to set a font size that remains the same, irrespective of changes to the web page. The keywords you can use to set an absolute font size are as follows:

<style>
  p { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

8 (9px)

<style>
  p { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

9 (10px)

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

0 (13px)

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

1 (16px)

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

2 (18px)

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

3 (24px)

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

4 (32px)

The values specified in parentheses are based on a browser whose default font size is

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 .

Relative keywords, on the other hand, set a font size that will change depending on the font sizing elsewhere on the web page. The relative keywords you can use are: smaller and larger. These keywords are useful because they allow you to change the size of your fonts as other font sizes on the page change.

Suppose we wanted to set the size of all

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

6 elements on a page to

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 (x-large) and all

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

8 elements to

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

9 (large). We could do so using this code:

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

Click the

button in the code editor above to see the output of our HTML/CSS code.

The font sizes for our

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

6 and

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

8 tags are

p { font-size: 1em; }
h1 { font-size: 1.5em; }

2 and

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

9 , respectively. However, we did not specify these sizes using pixels. Instead, we used the default font size keywords offered by the browser.

Set Font Size Using Viewport Units

Viewport units are calculated as a percentage of the browser’s viewport size. The two viewport units supported by CSS are: view height (

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

4 ) and view width (

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

5 ).

Because viewport units are a percentage of the browser’s viewport size,

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

6 is equal to 1% of the viewport height, for example. So, if you have a viewport 1000px wide,

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

6 equals 10px.

Using viewport units is useful because the size of your fonts will change as you resize the browser window. This, in turn, allows you to deliver a more accessible user experience adaptive to different browser and device sizes.

Suppose we wanted to create a site whose headers are 4% of the viewport’s width and whose paragraphs are 1% of the viewport’s width. We could do so using this code:

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

Click the

button in the code editor above to see the output of our HTML/CSS code.

If you resize the browser, the size of these headings will change.

Conclusion

The font-size property is used in CSS (and therefore HTML) to change the size of fonts. It accepts a number of units of measurement in which font sizes can be displayed, including pixels, em, rem, keywords, and viewport units. It can be applied to CSS classes and IDs , as well as to elements themselves.

This tutorial walked through the basics of CSS font size. Now you are ready to start using the font-size attribute like an expert.

Apa itu font size 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.

Apa itu font style pada CSS?

Properti font-style digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah: normal – teks normal; italic – teks miring (italic);

Apa arti property font size dalam 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 %.