Emphasize value

[shapper]

Hello,

I am displaying a list of statistics where each statistic has a value
and a phrase:

8 articles published

I want to emphasize the number 8 by giving it a bigger size and making
its weight bold.

How should my HTML markup be?
<ul>
<li><span>8</span> articles published</li>
<li>...</li>
</ul>

ul li {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
padding: 4px 0;
}

ul li span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

or maybe:

<ul>
<li><p><span>8</span> articles published</p></li>
<li>...</li>
</ul>

ul li {padding: 4px 0;

ul li p {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

ul li p span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

Or maybe some other option?

Thanks,
Miguel

 

[Jonathan N. Little]

Hello,

I am displaying a list of statistics where each statistic has a value
and a phrase:

8 articles published

I want to emphasize the number 8 by giving it a bigger size and making
its weight bold.

How should my HTML markup be?
<ul>
<li><span>8</span> articles published</li>
<li>...</li>
</ul>

ul li {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
padding: 4px 0;
}

ul li span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

or maybe:

<ul>
<li><p><span>8</span> articles published</p></li>
<li>...</li>
</ul>

ul li {padding: 4px 0;

ul li p {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

ul li p span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

Or maybe some other option?

Why the extra P? Do you feel compelled to add an extra element or are
your really listing paragraphs!

 

[Jukka K. Korpela]

I want to emphasize the number 8 by giving it a bigger size and making
its weight bold.

How should my HTML markup be?

Is there HTML markup for emphasis?

<li><span>8</span> articles published</li>

ul li {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
padding: 4px 0;
}

Why do you set the font size 25% smaller than the user-selected size?

Here's adequate markup:

<ul class="stats">
<li><strong>8</strong> articles published</li>
<li>...</li>
</ul>

Alternatively, you could use <em> instead of <strong>, but this sounds more
like strong and global emphasis rather than the within-text emphasis that
<em> "really" means. Either way you need to pay attention to typical default
rendering when designing your style sheet, which could be e.g.

.stats li {
font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
padding: 0.25em;
}
.stats strong {
font-size: 1.5em;
font-weight: bold;
}

Here font-weight: bold just confirms the typical default rendering.

By typographic tradition, bolding is normally use with sans-serif fonts,
whereas italics and small-caps are normal emphasis methods for serif text.
We need not take this too seriously in web authoring (partly because
small-caps isn't really supported and italics is often too unnoticeable on
screen), but I think everyone should know the tradition and then
_consciously_ deviate from it when appropriate.

Don't forget the possibility of coloring text or background for emphasis.
The cost nothing on the web, unlike in print.

 

[shapper]

Is there HTML markup for emphasis?


Why do you set the font size 25% smaller than the user-selected size?

Here's adequate markup:

  <ul class="stats">
    <li><strong>8</strong> articles published</li>
    <li>...</li>
  </ul>

Alternatively, you could use <em> instead of <strong>, but this sounds more
like strong and global emphasis rather than the within-text emphasis that
<em> "really" means. Either way you need to pay attention to typical default
rendering when designing your style sheet, which could be e.g.

 .stats li {
      font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
      padding: 0.25em;
 }
 .stats strong {
      font-size: 1.5em;
      font-weight: bold;
 }

Here font-weight: bold just confirms the typical default rendering.

By typographic tradition, bolding is normally use with sans-serif fonts,
whereas italics and small-caps are normal emphasis methods for serif text..
We need not take this too seriously in web authoring (partly because
small-caps isn't really supported and italics is often too unnoticeable on
screen), but I think everyone should know the tradition and then
_consciously_ deviate from it when appropriate.

Don't forget the possibility of coloring text or background for emphasis.
The cost nothing on the web, unlike in print.

Yucca, thank you for the explanation.

I am using Georgia because I wanted its looks on this case and 1em
looks to big for the purpose of displaying a text line with
statistical info.

Should I use Georgia only for heading?

Thanks,
Miguel