liveBook · Manning

Logarithm

As explained in Math for Web Design

A logarithm is the exponent to which a base must be raised to produce a specified number.

A logarithm asks for the exponent that turns a base into a number. In log(8, 2) = 3, the base 2 raised to 3 produces 8. CSS log(x, base) makes that calculation available inside CSS math expressions. section 3.2.4

Logarithmic growth is useful when each additional step should increase a value more gently than the previous one. A font scale can add one to a step, take its logarithm, then multiply the result by 1rem.

A logarithmic type scale

Set --step on each heading and use font-size: calc((log(var(--step) + 1) + 1) * 1rem). Steps 0 through 12 produce a graduated heading scale while preserving a 1rem base size.

How Math for Web Design covers it

How deep it goes
Defines logarithms through a base-and-exponent example, then applies log() in a CSS calculation.
Examples
Demonstrates log(8, 2) = 3 and a heading scale with steps from 0 to 12.
What it assumes
Teaches the base-and-exponent meaning of logarithms through a direct numeric example.
What you can do after
Apply it via CSS log() and calc() to build a logarithmic font-size scale.
How it connects
Connects logarithms with CSS math functions, calc(), custom properties, and typography.

Also explained in

Compare how 3 books explain logarithm →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.