Curriculum

Course: CSS

Login

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Font Size

Font Size

The font-size property determines the size of text displayed on a webpage.

Managing text size is crucial in web design. However, it’s essential to avoid using font size adjustments to mimic different text elements, such as paragraphs resembling headings or vice versa.

It’s recommended to utilize proper HTML tags like <h1> – <h6> for headings and <p> for paragraphs.

The font-size value can be either absolute or relative:

Absolute size:

Specifies the text to a fixed size.
Does not permit users to alter the text size in all browsers, which can pose accessibility issues.
Useful when the physical size of the output is known.

Relative size:

Sets the text size in relation to surrounding elements.
Allows users to adjust the text size in browsers for better accessibility.

Note: In the absence of a specified font size, the default size for regular text such as paragraphs is 16px (which equals 1em).

Set Font Size With Pixels

Defining the text size in pixels provides complete control over its appearance.

Example

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Tip: Even when using pixels, you can utilize the zoom tool to resize the entire page.

Set Font Size With Em

To enable users to adjust text size via the browser menu, numerous developers opt for using “em” instead of pixels.

One “em” corresponds to the current font size. In browsers, the default text size is typically 16px. Hence, the default size of 1em equals 16px.

You can convert size from pixels to em using this formula: pixels divided by 16 equals em.

Example

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

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

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

In the aforementioned example, the text size in “em” remains consistent with the previous example using pixels. However, utilizing “em” size permits adjusting text size across all browsers.

Regrettably, there persists an issue with older versions of Internet Explorer. Text tends to become larger than intended when enlarged and smaller than intended when reduced.

Use a Combination of Percent and Em

A universal solution across all browsers involves defining a default font size in percentage for the <body> element.

Example

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

Our code is now performing exceptionally well! It ensures consistent text size across all browsers and enables users to zoom or resize the text seamlessly.

Responsive Font Size

Text size can be defined using the vw unit, representing the “viewport width.”

This approach ensures that the text size adjusts according to the size of the browser window.

Hello World

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

Example

<h1 style=”font-size:10vw”>Hello World</h1>

The viewport refers to the size of the browser window. In this context, 1vw equates to 1% of the viewport width. For instance, if the viewport measures 50cm in width, then 1vw would correspond to 0.5cm.