Retrieving the Present Text Size Using CSS

Feedback


Font Size

The value of
size of the Text
is determined by the

font-size

attribute.

It is crucial to have control over the text size in web design. Nevertheless, it is not advisable to manipulate font sizes to give the appearance of headings in paragraphs or vice versa.

Utilize the appropriate HTML tags for various content elements such as headings, which require tags like <h1> – <h6>, and paragraphs, which necessitate the <p> tag.

The value for font-
size v
can be either absolute or relative in size.

Absolute size
:

  • Sets the text to a specified size
  • In all browsers, the inability to change the text size is not allowed, as it can be detrimental to accessibility.
  • If the dimensions of the output are known, then
    absolute size
    can be utilized.

Relative size:

  • Specifies the size in relation to the nearby elements.
  • Enables the user to adjust the size of text displayed on web browsers.

When no font size is mentioned, the default value for
default size
is 16px, which is applicable for regular text such as paragraphs and is equivalent to 1em.


Set Font Size With Pixels

Using pixels to set the size of the text provides complete authority over its size.

Example
h1 {

font-size: 40px;

}

h2 {

font-size: 30px;

}

p {

font-size: 14px;

}


Try it Yourself »

In case you opt for pixels as your measurement unit, you can make use of the zoom tool to adjust the size of the entire page.


Set Font Size With Em

Developers often opt for using em instead of pixels to enable users to resize the text via the browser menu.

The size of 1em font is equivalent to
equal to the current
. By default, the text size in browsers is 16px, thus making the default size of 1em font equal to 16px.

The conversion from pixels to em can be done using the following calculation: dividing the number of pixels by 16 will give the value in 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 */

}

Try it Yourself »

The size of the text in em is identical to the pixel size in the previous example. Nonetheless, using em allows for adjusting text size across all browsers.

Regrettably, older versions of Internet Explorer are still problematic as the font size becomes disproportionate – larger than intended when enlarged and smaller than intended when reduced.



Use a Combination of Percent and Em

To ensure compatibility with all browsers, a default font-size can be applied to the <body> element using a percentage value.

Example
body {

font-size: 100%;

}

h1 {

font-size: 2.5em;

}

h2 {

font-size: 1.875em;

}

p {

font-size: 0.875em;

}

Try it Yourself »

Our code is functioning perfectly now! It maintains consistent text size across all browsers and enables text zooming and resizing on all browsers!


Responsive Font Size

The “viewport width” unit can be used to adjust the size of the text.

By doing so, the font size will be in sync with the dimensions of
browser window
.

Adjust the size of the browser window and observe how the font size changes accordingly.

Example

Posted in Css