Setting subheads with CSS

ilumin(t):

เทคนิค CSS ที่เอามาเล่นกับ Header

Originally posted on The Typekit Blog:

Today’s post was written by Marko Dugonjić, a designer based in Velika Gorica, Croatia.

Subheads are typographic devices that establish content structure for the reader, providing a short overview of the content that follows. We can use them as points of visual interest or as simple navigational aids that gradually disclose the content. However, default subhead styles rendered by the browser can be too generic. If you’re looking for some variety, you can achieve some interesting effects with a pinch of CSS.

To start, we will bring together a few basic methods that can be combined and expanded upon:

  • sizing to a typographic scale
  • variations in style
  • hanging subheads
  • running-in subheads
  • non-alphabet symbols
  • crossbars

As we look at each of the methods, you can follow along on this demo page to see these—and even more—variations in action.

Sizing to a typographic scale

When designing a hierarchy for the web, a…

View original 1,346 more words

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s