Issue 1: it's easy to make the first letter bigger - use text-transform

Issue 2: are you talking about the vertical alignment? I'm not aware of any css way to do that unless you split your word in to (first letter + rest of word). Then you could use a line spacing to "center" the rest of the word.

Yes I am going for a vertically centered line of text, even when different letters are different heights.

Thanks for that other link though...good info!

-Chris

For the first letter you can try using the psuedo element first-letter. You can find an example at http://www.w3schools.com/css/css_pseudo_elements.asp. I'm not sure of the browser support here so check that out.

For the rest you may need to slice and dice the text with spans you can manipulate. Do you have a wireframe displaying it?

No wireframe at this point. Just doing recon. :-)

-Chris

The problem with what you're after is you're effectively changing the font baseline in mid-sentence.

But, given that, it's still possible.

First question is: Do want to make it work in all browsers? If so, stop reading at this point, because I'm too lazy to work that out.

The easy way to vertically center a single line of text is with line-height. For example, if you can guarantee it will only be one line, the a font-size of 16px and a line-height of 30px will vertically center the text in a 30px high box.

So there's the basic method: line-height same height as box.

But....making the first letter large will move the font baseline down, so the entire line's baseline will be the same. So the large letter gets centered, everything else is too low.

So take Matt's idea above and style the first letter to a font-size a few pixels larger, then try using a negative margin-bottom to bump the bottom of the letter down a few pixels.

Alternatively, instead of making line-height the same as box height, you could make line-height smaller than box-height by half the size difference between the larger and "normal letters in the line.

Concrete example:

given 16px normal font size, 30px high menu box, and 20px larger font:

Alternative 1:
.menu a { font-size: 16px; line-height: 30px; }
.menu a:first-letter { font-size: 20px; margin-bottom: 2px; }

Alternative 2:
.menu a { font-size: 16px; line-height: 28px; }
.menu a:first-letter { font-size: 20px; }