Design Tip: Use Strength and Weakness - Signal vs. Noise (by 37signals)

Design Tip: Use Strength and Weakness Ryan 24 Mar 2005

13 comments Latest by Anonymous Coward

Morning Editing website screen cap

As designers, we use the tag to make text pop out on the page. What about when we want some text to sit back? The site for NPR’s Morning Edition brought this to mind. Check out how the bumpers (songs between segments) are in much lighter type than the segment titles. The designers used strength and weakness to clearly reflect the difference between which content is crucial and which is candy. Where’s my <weak> tag?

13 comments so far (Jump to latest)

Blake Scarbrough 24 Mar 05

Could you use the for something like that. I don’t know if it is still used but it would degrade nicely.

what about <blink> also, —oh wait, that would be used by weak designers.

Don Schenck 24 Mar 05

Wow … a weak tag. Great idea.

Rick Olson 24 Mar 05

I think Blake may be right. Even though there’s no actual “weak” tag, small could work. But, if you want strict semantic markup (or Tantek �elik happens to be looking over your shoulder), you could use a descriptive class name on the container element.

John 24 Mar 05

You could make a weak tag :) (Even better you could make it validate - http://www.alistapart.com/articles/customdtd/)

All you’d need to do is add a style on how to handle the weak tag for your CSS…

Dan Cederholm 24 Mar 05

“As designers, we use the tag to make text pop out on the page.”

Actually, we should be using to convey “strong emphasis” only. Making text pop is purely presentational and a coincidental result of the element as rendered in the most browsers. But hey, that’s just the markup geek in me talking :-).

Agreed that we should have a <weak> element — or even better: <de-emphasis>. Interesting idea.

RS 24 Mar 05

Making text pop is purely presentational and a coincidental result of the element as rendered in the most browsers… . But hey, that’s just the markup geek in me talking :-).

The presentation geek in me comes to the defense :)

What I mean by “pop” is that it has to stand out and draw more attention. This is invariant no matter what the presentation device is, as long as the tag is supported.

Markup always terminates in an experience, and the experience of “strong emphasis” is always a kind of popping-out, no matter what the medium is. Otherwise what’s the point?

Like this: 1 2 3 4 5 6.

“5” will always pop, no matter what the medium is, because that’s what does.

Jonathan Fenocchi 24 Mar 05

Ryan, yes, the STRONG tag inherently produces bold, italicized, large or otherwise highlighted text. However, think about the case of a non-graphical browser. For example, a screen-reader for the blind would read the text wrapped in STRONG tags with more emphasis than normal text (or even text wrapped in EM tags). In the end, Dan is still correct. The STRONG tag’s meaning is not a result of its presentation, but its presentation a result of its meaning. ;)

josh 24 Mar 05

An underused technique for sure. Just something to be careful of, watch out for accidentally making your “weak” elements look like inactive (dimmed and disabled) elements.

Ryan Nichols 25 Mar 05

I’ve used general classes like ‘understate’ or ‘contextual’ that I pop on any element that needs to lay back and relax.

‘contextual’ I use for links that sit next to items such as ‘more’ or ‘edit’. Works fairly decent.

Not that asking for a ‘weak’ tag is weak, it just won’t happen this week. :)

Reuben Feffer 25 Mar 05

The NPR site is nice when it comes to the “weak” styling of the songs, but they also highlight the headers of the various topics, even though you can’t click them. I would have to give them a 1 for effort on that one.

David Erwin 25 Mar 05

I find this handy on most projects:

.deemphasis {
color: #666666;
font-weight:normal;
}

Turning the volume down is just as important as turning it up.