CSS font-size Property

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Property Values

Value	Description	Demo
medium	Sets the font-size to a medium size. This is default	Demo ❯
xx-small	Sets the font-size to an xx-small size	Demo ❯
x-small	Sets the font-size to an extra small size	Demo ❯
small	Sets the font-size to a small size	Demo ❯
large	Sets the font-size to a large size	Demo ❯
x-large	Sets the font-size to an extra large size	Demo ❯
xx-large	Sets the font-size to an xx-large size	Demo ❯
smaller	Sets the font-size to a smaller size than the parent element	Demo ❯
larger	Sets the font-size to a larger size than the parent element	Demo ❯
length	Sets the font-size to a fixed size in px, cm, etc. Read about length units	Demo ❯
%	Sets the font-size to a percent of the parent element’s font size	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Font Size – How to Change Text Size Using Inline CSS Style

Kolade Chris

In HTML, the font you choose will play a major role in the look and feel of your web pages.

You get to pick the font’s color, weight, size, and so on. And all these features make your websites and apps look better and more presentable to the user.

With the font-size property in CSS, you can change how big or small the text is on the web page. You can use this property in any type of CSS you are writing – external, internal, or inline.

In this article, I will show you how to change the size of the text with the font-size property in inline CSS.

What is inline CSS?

Inline CSS is one of the three different ways you can use to style any HTML element.

Instead of targeting the element with a class or id attribute, or the element itself as the selector and styling it with that, you put all the CSS styles in the opening tag.

In addition, you have to make sure all the properties and values of your stylings are inside the style attribute. This style attribute is one of the numerous attributes accepted by all HTML tags.

In the example below, I change the background color of the text to crimson, the text color to #f1f1f1 (light-grey), and the font-weight to bold with inline CSS.

By the way, my browser is zoomed-in to a level of 400% which is why everything appears so big. I didn’t apply any additional styles to accomplish that 🙂

How to Change Text Size Using Inline CSS

To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.

There are built-in values such as large , larger , medium , small , x-large , and so on:

In the code snippet below, I change the size of the “Hello Campers…” text to x-large, one of the built-in values of the font-size property.

You can also set the value of the font-size property using a number with any unit such as pixels (px), rem, or em.

It’s better to go with numbered values because they give you more freedom to pick any font size you want.

In the code snippet below, I changed the size of the text to 30px with inline CSS:

Conclusion

In this article, you learned how to change text size with inline CSS and the font-size property. You also saw how you can assign values to the font-size property.

Just a heads up, though: inline CSS is great for styling, but you should not rely heavily on it as it makes your HTML hard to read, especially if you are working in a team. You don’t want to be the only one who will be able to read your own code.

Be aware that it also overrides any styling set with internal or external styling. You should use external style or internal style instead, as they make your HTML and CSS codes separate, which is better for readability.

While assigning values to the font-size property, it is better to assign the values in rem units instead of px , for example. This is because when you use rem , the browser will be able to make font size adjustments as the user zooms in or out, which won’t happen when you use px .

Thank you for reading, and keep coding.

Источник

CSS Font Size

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like — for headings and

for paragraphs.

The font-size value can be an absolute, or relative size.

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h2 font-size: 1.875em; /* 30px/16=1.875em */
>

p font-size: 0.875em; /* 14px/16=0.875em */
>

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the element:

Example

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

Responsive Font Size

The text size can be set with a vw unit, which means the «viewport width».

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the font size scales.

Example

Hello World

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Источник

HTML Font Size – How to Change Text Size with an HTML Tag

Joel Olawanle

When you add text to your HTML file with an HTML tag, you won’t always want the text to remain the default size. You’ll want to be able to adjust how the text displays in the browser.

In this article, you will learn how to change the text size with an HTML tag.

Before you proceed, it is essential to know that there is only one way we can do this: through CSS’s font-size property. We can use the font-size property through inline, internal, or external styling.

In the past, we could adjust text size within our HTML tag without using CSS. But that was before HTML5. Then we added text using the tag, which can take in an attribute of size as seen below:

This size attribute can take in value from 1-7 in which the text size increases from 1 to 7. But like I said, this has long been depreciated, and most people don’t even know it existed.

In case you are in a rush to see how you can change the size of your text, then here it is:

// Using inline CSS 
Hello World!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Size With Inline CSS

Inline CSS allows you to apply styles to specific HTML elements. This means we are putting CSS into an HTML tag directly. We use the style attribute, which now holds all our styling.

We use the font-size property alongside our value to change the text size using inline CSS. This value can use any of your preferred CSS units such as em, px, rem, and so on.

 
Hello World!
 
Any text whose font we want to change
 

A perfect syntax would be:

How to Change Text Size With Internal or External CSS

The approach you use to change text size in internal and external CSS styling is similar, since you use a selector. The general syntax for this is:

The selector can either be our HTML tag or maybe a class or an ID. For example:

// HTML 
Any text whose font we want to change
 // CSS p

// HTML 
Any text whose font we want to change
 // CSS .my-paragraph

Wrapping Up

In this article, you learned how to change the font/text size of an HTML element using CSS. You also saw how developers did it before the introduction of HTML5.

Also, keep in mind that it’s always better to style your HTML elements using internal or external styling, as it offers a lot of flexibility compared to inline styling.

For example, you can make use of one CSS class for all your p tags rather than having to add inline styles to all your p tag elements.

Using inline styles is not considered best practice because it results in a lot of repetition – you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML.

I hope this tutorial gives you the knowledge to change the size of your HTML text so you can make it look better.

Источник