Grid Design Basics: Grids for Web Page Layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Grannell, Craig. Opera (2008). Articles>Web Design>Accessibility>CSS

Setting Web Type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography>CSS

Fonts for Web Design: A Primer

Modern CSS provides web designers with an unprecedented level of control over online typography. Restrictions are still imposed however by the limited number of “common” fonts—those typefaces that are generally available cross-platform. This article looks at the fonts web designers have available to them, and also considers their suitability for various tasks.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography