“An” is an article in an article about articles. Article semantics and design, that is.

This article was created just for me and my design teams, to be used as a reference when creating article designs and design systems. The objectives are (1) to assess typography, color, and spacing considerations, and (2) to align designs semantically with text editors for optimal work flow and presentational outcomes.

A good article design ensures that the easiest path for the author produces the best design outcomes and semantically accurate content. As thoughtful designers, we must:

• Design empathetically based on the ways authors create content and the formatting affordances built into common text editor tools.
• Identify the content elements of an article and their proper semantic markup.
• Account for each distinct content element in our CSS.
• Assign these styles as the .

Browsers apply default presentational styling for all content elements—font families, font sizes, colors, spacings, interactive states, and more. Any attributes not addressed in our CSS will be assigned default styling. Why not just use browser defaults? Wouldn’t that make our lives easier? Easier, certainly, but not better.

Accepting browser defaults forgoes opportunities for superior readability, trust, authority, value perception, and brand integrity. We don’t need to choose between form and function. Our (joyful) task is to embrace requirements for semantic HTML, readability, and accessibility and add value through presentational choices.

Btw, why the abstract expressionist art

because I love it. You're getting this resource for free; accept it and enjoy.

Paragraph text element

Semantically, this couldn’t be much easier; the <p> tag is applied to paragraph text. Pretty simple. The styling of paragraph text, however, represents a designer’s most consequential decisions. Paragraph text is the heart and soul of an article. All of the baked-in virtues and flaws of the text are repeated over and over throughout the reading experience of every word in every paragraph in every article. Style affects:

• Legibility and readability.
• Accessibility for visually impaired and neurodiverse readers.
• Brand expression—personality, voice, tone, and vibe.
• Perception of value, trust, and authority.

No pressure. Do your homework. Test your body text designs with readers.

Update, July 2024: Portada-Regular, by TypeTogether, is the body-text typeface for this article.

Implementation decisions (size, letter-spacing, line-height, line-length, max-width) all are critical readability decisions. The number of characters per line—a product of body text size and column width—should fall within the optimal range for a comfortable reading experience. Read more about optimal character counts here, here, and here.

Pseudo classes

This design accounts for basic pseudo classes: link, hover, active, and visited.

We signify hyperlinked text in two ways, in keeping with WCAG 2.1 accessibility best practices. We use two design changes to signify a link: color change and underline.

Color for anchor links should adhere to the “smallest effective difference” philosophy—just different enough from body text to be clearly distinguished but close enough to ensure smooth reading and avoid eye jitter. Underlines should be noticeable, but not distracting.

Hover and active states are essentially irrelevant on mobile devices. This design includes hover and active as progressive enhancements. At wider screen widths, hover state provides feedback to users, confirming they are about to tap an anchor link.

Other block-level elements

In a block layout, boxes are laid out—well, like blocks—one on top of the other, vertically, beginning at the top of a containing block. The block encompasses the entire element from top to bottom, side to side. A style applied to a block affects all of the content within the block (unless overridden by an inline-style, which we’ll discuss shortly).

Headings and labels

Headings describe, organize, section, and style article content. Search engines use heading tags to understand a page's structure and content. Headings create a hierarchy of information, with h1 being the most important and h6 being the least.

A portfolio of heading styles will be available in any text editor, although the number of options will vary. The following heading tags are used to make this article:

• Heading 1. Also known as the title or main headline, it is assigned an h1 tag. Only one h1 per article. (Example)
• Heading 2. This is the main subheading tagged as standard h2. (Example: Common text editor affordances)
• Heading 2 classes. These elements also receive h2 tags but are given HTML classes for styling purposes. Why create classes? Why not just use available h5 or h6 tags? Because the content that appears in these h2 classes is descriptive of the article and valuable for search engines. H2 tags increase search visibility.
• Heading 2-topic label. Sometimes used to nest the article within a topic category. Other times used to add a bit more context, description, or personality to an article. (Example: Article semantics)
• Heading 2-article description. This is an important piece of the article. It serves as a description for SEO value and search results. Plus, it is inferred by readers as a concierge service that increases perception of value. I call this class dek, which is an old newspaper term that describes its placement below the main headline. (Example)
• Heading 2-chapter heading. In very long articles, this heading style enables organization and hierarchy of content. This style denotes major thematic breaks in a narrative. (Example: Other block-level elements)
• Heading 3. Less prominent than heading 2, this heading is assigned an h3 tag and is used for smaller text breaks. Content under an h3 tag is tyically a subset of an h2 heading. (Example: Bold and Italic)
• Heading 4. I use this heading option, which is tagged as an h4, for presentational purposes. In this design, heading 4 produces a label within a yellow label box. (Example: So what?)

List elements

Unordered lists

Use unordered lists when order and ranking are not critical. For example, a list of artists featured in Ninth Street Women, by Mary Gabriel.

• Lee Krasner
• Elaine de Kooning
• Grace Hartigan
• Joan Mitchell
• Helen Frankenthaler

Unordered lists, sans indent and bullets

In this design, we’ve created an additional list class that properly identifies content as a list but presents it differently, more like body text. (Example: The headings list just above)

Ordered lists

Use ordered lists only when order is critical. Numbers imply importance of sequence or ranking. Do not use them simply because numbers look pretty cool (they do). For example, the evolution of Robert Motherwell’s Elegy to the Spanish Republic No. 132:

1. Begun in 1975, originally based on the composition of an earlier, small-scale work, Spanish Elegy with Orange No. 3. The first version contained areas of orange, like the small picture on which it was modeled.
2. Made structural revisions and repainted it entirely in black and white in 1975.
3. Major revisions again in 1976 and 1977.
4. Added large areas of pink and yellow ochre in 1983.
5. Painted over the pink areas with ochre, as seen in the final image.

Description lists

Use description lists to create a simple pairing of term and description. Description lists are standard HTML elements that are undervalued and underused; you won’t find affordances for building them in most text editors. If you want to make one, you’ll probably need to hand-code it using <dt> (description-list term) and <dd> (description) tags.

Automatism

Subconscious drawing in which the artist allows his unconscious mind to take control.

Gesturalism

Method of painting characterized by energetic, expressive brushstrokes deliberately emphasizing the sweep of the painter’s arm or movement of the hand.

Action painting

Highly-charged, impulsive style of abstract gestural painting during which paint is energetically splashed, spilled, or dribbled onto a canvas, usually placed face-up on the floor.

Blockquotes

The blockquote element is a wrapper that encloses a quotation and an attribution (attribution is not required in the blockquote element). <blockquote> indicates to browsers that the enclosed text is associated with a quote and intended to be set apart from surrounding content.

There are two use cases for blockquotes: pull quotes and excerpts, which we’ll style differently using classes.

Pull quotes

Pull quote is not an HTML designation, but it's a common term used in text editors. Pull quote describes an outcome an author wants. Everyone loves a pull quote. Good candidates for pull quotes are less than 50 words and chosen for impact.

“Abstract art enables the artist to perceive beyond the tangible, to extract the infinite out of the finite. It is the emancipation of the mind.”

—Arshile Gorky

Pull quotes are good things that can become bad things. They can be overused design gadgets that intrude on your narrative. Use pull quotes sparingly.

Excerpts

An excerpt, in this design, is a class of blockquote created for a specific purpose—to identify and style content quoted from outside sources. Because these excerpts can be somewhat long, they are designed to be read like text.

It’s a good practice to link to the originating source of the excerpt, in this case The Museum of Modern Art:

Mark Rothko sought to make paintings that would bring people to tears. “I’m interested only in expressing basic human emotions—tragedy, ecstasy, doom, and so on,” he declared. “And the fact that a lot of people break down and cry when confronted with my pictures shows that I can communicate those basic human emotions….If you…are moved only by their color relationships, then you miss the point.”

Like his fellow New York School painters Barnett Newman and Clyfford Still, Rothko painted to plumb the depths of himself and the human condition. For him, art was a profound form of communication, and art making was a moral act.

Inline body-text elements

Inline styling tools built into text editors help authors do their jobs simply, quickly, and without the need to insert risky, hand-crafted HTML code. Our job as designers and engineers is to construct our articles so that the simplest solutions result in the best outcomes. Designers and engineers can minimize the need or desire to insert hand-coded HTML by delivering a complete semantic article spec that anticipates content needs and solves for them through basic text editor tools.

Common text editor affordances

Text editors differ in the number of formatting options they offer. None of them address every need (we could debate what constitutes need). Sometimes authors will need to hand-code some HTML or place a pre-styled, reusable component.

Strong and Emphasis

Strong and emphasis are semantically correct tags that apply meaning to content, telling browsers, text-to-speech engines, and screen readers how we want words to be read and inferred. These styles are accomplished with <strong> and <em> tags.

Bold and Italic

Styling affordances for bold and italic are available in most text editors. Bold and italic are presentational tags; they change appearance but do not attach any semantic meaning. These styles are accomplished with <b> and <i> tags.

Inline code

Content can be presented as <code> snippets. Here is an example. The result is a monospace font that resembles computer code from a programmer’s text editor.

Marked (highlighted) text

Noteworthy content can be highlighted using the <mark> tag.

Quoted material

Quotes made with the <q> tag are inline styles. If you can’t find your inspiration by walking around the block one time, go around two blocks—but never three. —Robert Motherwell

Encourage authors to limit use of <q> to short lengths of text. <q> results in italic text, which is more difficult to read than Roman (normal). For longer lengths of text, use a block-level quote style.

Important: <q> adds quotation marks, so please don’t double up.

Underlined and inserted content

These two elements look similar but have different meanings:

• The inserted tag, <ins>, applies meaning—that content has been added to a document. This is an example.
• The underline tag, <u>, is used for presentational purposes only; it does not imply meaning. This is an example.

The examples shown above use browser-default styling. Both have obvious, fundamental usability problems built-in: They can easily be mistaken for anchor links. You can lessen the problem by styling your anchor link underlines to appear differently.

Don’t bother styling underlined, inserted, and anchor links body text to each have distinctive look that you expect readers distinguish. It’s unreasonable to expect your readers to retain the a mental model of implied meanings that exists only within your publication. My advice:

• Focus your efforts on making well-designed, accessible anchor links.
• Coach authors to resist using underlines for purely presentational reasons. Use <strong> or <em> if you want select words to stand out.
• Take browser-default styling for <ins> and don't worry too much about it; not many text editors offer and affordandance for tagging inserted text.

Deleted and Strikethrough

This is another case of similar look, different meaning. The deleted tag, <del>, identifies content that has been removed from a document. The strikethrough tag, <s>, identifies information that is not correct. (Recommendation: Accept default browser styling.)

Citations

Citations are used to reference works of creative art, such as Eastside Peddler by Grace Hartigan, 1956, or to include a source of quoted material, such as I am nature. —Jackson Pollock. Citations are made using the <cite> tag.

Superscript and Subscript

If you want to cite the Pythagorean theorem (a² + b² = c²) or the chemical expression of an orange pigment (C₁₆H₁₀N₄O₅), these styles are for you. These styles are accomplished with <sup> and <sub> tags. Browser defaults cause awkward line spacing aberrations in our body text, so we add one line of code to CSS (line-height) as prevention.

Small Text

Small print, side comments, and legal notes can be shown with the <small> tag, which, by default, is one font-size smaller than paragraph text. This is what small print text looks like. It’s a subtle but noticeable difference. (Recommendation: Accept default browser styling.)

Random notes

CSS spacing, July, 2024

I've updated my CSS to reduce the amount of hair that I pull out when styling margins and padding. Browsers apply default margin and padding measures to content elements. When you apply padding or margin measures in your CSS, you're adding or subtracting from a default. This can produce some unexpected spacing results when authors order content elements in ways you don't anticipate. Now I zero-out the padding and margin for each element and use the following properties instead of padding and margin:

• margin-block-start:
• margin-block-end:
• padding-inline-start:
• padding-inline-end:

This, by the way, is consistent with the way some CMSs, such as WordPress, manage block spacing as well.