CSS - font-size property

What is font-size in CSS ?

font-size in CSS is a property that defines the length (size) of a font.

font-size by himself is an element of typography.

By setting font-size on different media query, you will set up what's called a responsive typography

Example

Fix amount

The font-size uses generally a relative sizing

body {
  font-size: 16px;
}
p.base1 { font-size: 1rem } /* ie 1rem = 1 * 16px = 12 px */
p.base2 { font-size: 2rem } /* ie 2rem = 2 * 16px = 32 px */
  • The html code
<p class="base1">16px text</p>
<p class="base2">32px text</p>
  • Output:

Based on the width of the viewport

The following sets the font-size so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.

With the root selector, the calc function and the vw length unit (1/100th of the window's width)

:root {
  font-size: calc(100vw / 40);
}

Size

Base

The base unit size for relative sizing that is set on the body has generally a set of 16px

This is the default for web browsers which means that setting a 1rem on the body will get you a font-size of 16px.

body {
    font-size: 1rem;
}

How to

Calculated font-size

en-US/docs/Web/API/Window/getComputedStyle

.parent { font-size: 20px }
.medium { font-size: 0.75em }
.small { font-size: 0.5em }
<div class="parent">
    <p>Hello Nico</p>
    <p class="medium">Hello Nico</p>
    <p class="small">Hello Nico</p>
</div>
div = document.querySelector("div");
console.log("The font size of the parent div element is "+window.getComputedStyle(div).fontSize);
allP = document.querySelectorAll("p");
console.log("The font size of the first p element is "+window.getComputedStyle(allP.item(0)).fontSize);
console.log("The font size of the medium p element is "+window.getComputedStyle(allP.item(1)).fontSize);
console.log("The font size of the small p element is "+window.getComputedStyle(allP.item(2)).fontSize);

Readability

The higher the font-size, the readable.

Not that for small size, you can use the font-size-adjust property 1) legibility of fonts, especially at small sizes





Discover More
Boxdim
CSS - Emphemeral unit (em | equal M)

The emphemeral unit (em) is a relative size to the default font-size set in a browser (=16px on windows) A font-size of 0.875em translates to 87.5% of the default fontsize of the browser. To simplify:...
CSS - Font

This page is font in CSS and html. From a web perspective, a font is considered to be a media resource and can be included in any page from any origin. the font-size is set on the body to be able...
CSS - How to get an inline property with Javascript (font-size)

This page will show you how to retrieve the value of a css property defined inline with the style attribute
CSS - Point (pt or pts) unit

Point (pt or pts) is a length unit commonly used in the print industry to get device pixel perfect mapping. It's then commonly used with the print media. One point is equivalent to 4/3 physical...
Boxdim
CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a...
Boxdim
CSS - Rem (Root Emphemeral Unit)

rem is a length unit that is based in the the font-size of the root element of the document. To write style rules that is constant throughout the document, use the rem rem stands for root em (ie root...
CSS - Responsive typography

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries See also: ...
CSS - line-height Property

On block level elements, the line-height property specifies the space between the text lines and is known as the Leading where: the value is one of: normal, - let the browser choose a reasonable...
HTML - HTML element (Document root)

The html element represents the root of a a html document (page). It would become also the root (top node) in the in-memory tree representation (DOM document) of this html page. This is also the node...
Font Size Unit Inkscape
Inkscape - Text

Three type: regular text. flowed text; A text object that includes a rectangular frame. linked-flowed text. A text object where the text is flowed into a separate arbitrary shape or path object(s)...



Share this page:
Follow us:
Task Runner