CODEWITHSUNDEEP
csshtmlsemantic-markup
Lee McAlilly
Lee McAlilly

Reputation: 9314

Semantic Markup vs. Consistent Typography

I'm having trouble making my semantic markup work with fluid typography that maintains a constant vertical rhythm.

As far as semantics of a page are concerned, you should order your page in a hierarchy based on meaning h1, h2, h3, h4, etc. A great example of this would be http://zeldman.com.

But I've found this difficult to maintain if you want to use consistent typography. You eventually end up having to repeat your typographic rules and doing complex math as inheritance comes into play in your stylesheet. So the other approach would be to not worry about the order of your header tags and just select them for the font size. You can see this approach here: http://fluidbaselinegrid.com/ or on Eric Meyer's site here http://meyerweb.com/. Eric's site skips the h2 tag altogether.

So which is the best approach? Is there a way to accomplish both that I'm missing?

Upvotes: 1

Views: 338

Answers (3)

Joe Conlin
Joe Conlin

Reputation: 5994

semantic code and page rhythm are independent of each other with the exception that well written, semantic, code is much easier to control rhythm with.

In regards to addressing vertical rhythm, first thing to keep in mind is to always use [em] for your unit of measure. This will allows for relative measurement setting between all of your elements. From there, without getting completely complicated, I set all of my typography relative to each other using:

http://drewish.com/tools/vertical-rhythm

While there are a few "rhythm" tools out there, it seems to be the easiest to use. Then, I use the following as a template that I created to drop in after my reset (obviously the measurements themselves change depending on my design).:

/****** TYPOGRAPHY ******/
body {font:15px/1.5em HelveticaNeueRoman, "Helvetica Neue", Arial, Helvetica, sans-serif; /* baseline */
-webkit-font-smoothing: antialiased;*font-size:small;
}
    p {font-size: 1em; line-height: 1.4667em; margin:0 0 1.4667em 0;}
    p.intro {font:1.2667em/1.375em Cambria, Georgia, Times, serif;margin:0 0 1.1579em 0;font-style:italic;}
    a, a:link {color:#24518f;text-decoration:none; -webkit-tap-highlight-color:#FF5E99;}
        a:hover {color:#b20000;}
        a:active {position:relative;top:1px;}
        a:focus {outline: thin dotted;}
        a:hover, a:active {outline: 0;}
        a {-webkit-transition: color .25s ease-out, text-shadow .25s ease-out;  -moz-transition: color .25s ease-out, text-shadow .25s ease-out;
    -o-transition: color .25s ease-out, text-shadow .25s ease-out; transition: color .25s ease-out, text-shadow .25s ease-out;}

/* headers */
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color: #414141;}
    h1 {font:1.9333em/1.5172em HelveticaNeueHeavy;margin-bottom: 0.7586em;letter-spacing:-1px;}
    h2 {font:1.6em/1.8333em HelveticaNeueBold;margin-bottom:0.7586em;letter-spacing:-1px;}
    h3 {font:1.2667em/1.1579em HelveticaNeueBold;margin-bottom: 1.1579em;}
    h4 {font:1.0667em/1.375em HelveticaNeueBold;margin-bottom: 1.375em;}
    h5 {font:0.9333em/1.5714em HelveticaNeueBold;margin-bottom: 1.5714em;}
    h6 {font:0.8667em/1.6923em HelveticaNeueBold;margin-bottom: 1.6923em;}

Alternatively, you can take a look at some of the frameworks out there that are now starting to address vertical rhythm as well. An examples would be:

http://thesquaregrid.com/
http://fluid.newgoldleaf.com/
http://lessframework.com/

Hope that helps!

Upvotes: 0

Dennis Traub
Dennis Traub

Reputation: 51684

Semantics and style are orthogonal. Html-Tags like <h1> are used for semantic purposes. CSS is used for styling and typography.

You can change the look and feel of your document independently of the semantic markup.

Have a look at the CSS Zen Garden if you're interested, what can be accomplished with one specific html document when using CSS properly.

Upvotes: 1

Brent
Brent

Reputation: 2971

Use classes for the styling.

Go ahead and set your base styles for h1-h6, for headers that stylistically differ from these base styles, use a class to override the base style.

This way, you can use the appropriate tag and maintain your page outline while styling them as appropriate.

Upvotes: 0

Related Questions