Butterick's Practical Typography introduces the terms "foreground" and "background" in the context of page layouts.^[1] In art, the foreground is the area closest to viewers, and the background is the farthest part. We perceive foreground elements as more important and background elements as having little significance. The same principle can be applied to a page layout.

In the page layout context, the foreground is the area that contains essential page elements — mainly headings and the body text. The background contains everything else, like sidebars and navigation.

It's crucial to make the foreground elements more prominent than background elements. Use position, size, font, and color to communicate different levels of importance. For example, choose a larger type for the body text while reducing the weight and size of secondary elements. Using a more subdued color also communicates lesser importance.