Should colons be styled in the same way as the preceding label is?

by Bram Vanroy   Last Updated January 18, 2018 20:16 PM

Is it common for designers to style a colon in the same way as the preceding label, even though the following text does not follow this style?

For instance, I have the habit of making the colon bold if the label is bold as well.

Bold: the colon is bold, as is "Bold", but the text following isn't.

But when italicizing, I often do not make the colon italic (for no apparent reason, simply a habit)

Italic: the colon isn't in italics, just like the text following.

However, I think it's best to adopt an identical approach for each case. Also, in webdesign this might be crucial to provide a semantically valid HTML structure. Would one write markup like so:

<p><span class="bold">Bold:</span> the colon is bold, as is "Bold", but the text following isn't.</p>

Or like so?

<p><span class="bold">Bold</span>: the colon is not bold and neither is the text following it, but "Bold" is.</p>

Answers 2

Do you want to use the first part as a title or just emphasize (a part of) it? Colons can be used as follows:

Separating one sentence:

    <strong class=“label”>When the first part is bold</strong>: 
    the colon is styled normally.

Separating two sentences:

    <strong class=“label”>This colon separates two sentences</strong>:
    Still, the colon is styled normally.

But if the colon is part of a title there is probably already some kind of separation like a line break or indentation, no need for a colon. But if it is needed (really?), it would be more logical when it has the same style as the title. Talking about semantics, a definition list would be a better choice then.

Take this title and code for example

    <dt><strong>The whole label is bold:</strong></dt>
    <dd>your description</dd>
December 29, 2014 13:39 PM

In design school I learned that one should not bold the colon as it is not what one is trying to bring emphasis to.

Regarding italics, it seems the rule is determined by which style guide one adheres to. I would generally go with italicizing a colon after and italicized word. More on that:

One style guide avoids the issue by ruling to not use italics in this situation.

February 06, 2015 13:46 PM

Related Questions

Why is 13px Arial font the web standard?

Updated August 18, 2017 09:16 AM

What are the steps for web design?

Updated December 29, 2017 17:16 PM