HTML and CSS Reference
In-Depth Information
Reviewing Content for Styling and Legibility
When building a site, it is useful to define a base set of styles for
common elements to ensure you start off on the right foot with a
readable and accessible design based on the chosen font faces, sizes,
and colors.
Early in the project timeline there often isn't representative copy
written for different page types or content available that includes
common tags such as lists, lower-level headings, or text that wraps
in uncommon ways. All these elements are crucial to allow for
reviewing
line-height
,
text-indent
, or other properties that impact
whitespace, aesthetics, and readability. So, how do you code and test
the default baseline and ensure you're starting with a readable site if
content isn't written and if design comps often have short passages
of uniform text?
In 2006 I wrote a blog post outlining the use of a generic test file that
contained a wide variety of HTML elements that could be included
into the first page you build or could be used in a style guide or
inventory document (
http://placenamehere.com/article/178/
).
I still
use this tag test document for most sites I work on and have placed
the code in a project on GitHub (
http://github.com/placenamehere/
Even earlier in the design process Typograph by Iain Lamb (
http://
lamb.cc/typograph/
)
lets you interact with the style properties of
a sample passage of text and experiment with the relationships of
type sizes, line heights, whitespace, column widths, and the scale
of type.
Both types of tools allow for early adjustment and review of a site's
styling and typographic choices and help create a great baseline
with which to build the rest of the site elements.
