CSS font-size-adjust Property

February 10, 2021 12:37 pm IST

You are Here:

CSS font-size-adjust Property

CSS font-size-adjust property will adjust the size of the font based on the height of lowercase rather than capital letters.

When the first-choice of a font-family specified by the author is unavailable font fallback occurs, that may results in bigger or smaller font size. The font-size-adjust property is a way to preserve the readability of text in such situation. It does this by adjusting the size of the lowercase letters.

In the following example, we will adjust the size of the lowercase letter to half of the size of the uppercase letter.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ font-size-adjust: 0.50; } #div1{ font-family: verdana; } #div2{ font-family: 'Lucida Console'; } </style> </head> <body> <h1>CSS font-size Property</h1> <h2>Div 1</h2> <div id="div1">This is a div container.</div> <h2>Div 2</h2> <div id="div2">This is a div container.</div> </body> </html>

Run

Syntax

Using CSS

element{ font-size-adjust: 0.50; }

Using Javascript

object.style.fontSizeAdjust="0.50";

Animatable

Yes, font-size-adjust property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS font-size-adjust property is none.

Property Value

The following table provides a list of values for CSS font-size-adjust property.

Value	Explanation
none	Set the size of the font based only on the font-size property.
Number	Set the size of the font so that its lowercase letters are the specified number times the font-size.

Using JavaScript

In the following example, we will demonstrate how to change the CSS font-size-adjust property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #div1{ font-family: verdana; } #div2{ font-family: 'Lucida Console'; } </style> </head> <body> <h1>CSS font-size-adjust Property</h1> <h2>Div 1</h2> <div id="div1">This is a div container.</div> <h2>Div 2</h2> <div id="div2">This is a div container.</div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div"); function myFunction(){ x[0].style.fontSizeAdjust = "0.50"; x[1].style.fontSizeAdjust = "0.50"; } </script> </body> </html>

Run