ThinkingWithType has an excellent description of typographic hierarchy; it is not specific to the web, but rather gives a definition in general terms.
To apply that to the web, we have a few tags at our disposal; namely h1, h2, h3, h4, h5, h6, and p. On this page, the "Advanced Typography" title at the top is an <h1> tag, the "Typographic Hierarchy" is an <h2>, and "Applying to the Web" is an <h3>. This is not rocket science - don't make it any more confusing than it needs to be. The key is to remember how you are using the tags on your site. For example, for this website the first line of nearly every page is the title, which I'm styling with an <h1> tag.
The CSS route is to shift the baseline using vertical-align:super; or vertical-align:sub;
Sample line one
Ex: 152 H2O
Sample line three
Sample line four
The problem, however is the line height will increase and you will have an unsightly gap between adjacent lines (more noticable when using tight leading). A better method is relative positioning with a class such as:
.superscript {
position:relative;
top:-0.5em;
font-size:0.8em;
}
.subscript {
position:relative;
top:0.4em;
font-size:0.8em;
}
Sample line one
Ex: 152 H2O
Sample line three
Yes, this will suffer from line spacing issues, too, but only if the font size of your super or subscripted characters is larger than the surrounding text.
Paranthesis are designed for use with lower-case letters. See (here) how nicely they are vertically balanced. If they are used with, say a phone number then things look worse.
(555) 123‑6567original
(555) 123‑6567fixed
Notice that the parenthesis and dash are too low in the first phone number. You can fix it by wrapping the parenthesis and dash in a span and applying the nudgeUp class.
.nudgeUp {
position:relative;
top:-.1em;
}
“Oh my god, this looks, like, way better.” Because the initial quote is hanging outside the left margin.
This was created with: <p><span style="margin-left:-.5em;">“</span>Oh my god...
Another way to create hanging punctuation is via the CSS property text-indent. I think either method is equally valid.
Straight (prime) quotes should be used for feet and inches. Example:
My boat is 24′ 9″ long.
My boat is 24′ 9″ long.
Curly quotes are created by:
Char= Entity = Keyboard shortcut (Mac only)
‘ = ‘ = Opt ]
’ = ’ = Opt Shift ]
“ = “ = Opt [
” = ” = Opt Shift [
Because you can directly type the quotes marks with the keyboard doesn’t mean you should. Dreamweaver templates have a problem copying those values over; it’s best to use the Entity values in your code instead.
“Curly” (a.k.a. typographers’ or book) quotes should be used for the apostrophy and for quoted material.
Your web visitors should never see the single or double keyboard quote marks on your pages. That is reserved for programming languages like JavaScript, PHP, etc. I suppose the one other exception would be ditto marks.
On a web page, always use the Entity or Hex codes instead of typing these special characters. You’ll run into problems when you need to copy/paste or using them in a Dreamweaver template.
Ligatures (such as fi, fj, fl) can automatically be used with the same property as kerning—text-rendering. To turn it on, set the value to "optimizeLegibility". MDN has a full description.
Alternatively, you could try font-variant-ligatures. Honestly, the web just isn’t ready for ligatures; skip for now.
Using the CSS property font-variant, you can set type in small caps. This is typically done as the introduction to a new chapter or when using acrynoms such as fbi, cia, or ibm; or time values like 1:00am.
.smallCap {
font-variant:small-caps;
}
Unfortunately, it can look poor depending on the font. Yet another instance where print typography (when using high-quality fonts) beats the web...
Kerning pairs (the space between two letters) can be achieved automatically through the CSS property text-rendering.
p {text-rendering: optimizeLegibility;} /* use the font's kerning */
Unfortunately, there are some serious bugs. You could manually adjust the kerning by adjusting the margin-right of the first character. For example, the following text has the "To", "Aw", "we", "om", and "me" pairs kerned via:
<p><span style="margin-right:-12px;">T</span>otally <span style="margin-right:-8px;">A</span><span style="margin-right:-4px">w</span>es<span style="margin-right:-5px;">o</span><span style="margin-right:-5px;">m</span>e</p>
Totally Awesome (kerned)
Totally Awesome (not kerned)
If your website has a lot of large text, then a JavaScript library such as Lettering.js and Kern.js could come in handy.
Safalra has documented a brute-force method to create drop caps. It is specific to a typeface, which limits its use, but I’m not sure there is a better way to do it.