Web page top margin when different fonts are in different columns

Question

I have a web page with two columns:

• The narrow left column is a vertical navigation bar with a small (or ordinary) sized font
• The main right column contains the content, which has a mix of fonts (e.g. it starts with a large-size <h1> heading.

Here is a screenshot of the top of the page:

My questions are:

• Don't you agree that it's important, that the top of the text in the left-hand-column (e.g. ".NET") should align with the top of the text in the right-hand column (e.g. "WYSIWYG")?
• Is there any design alternative (any way to change the design, perhaps add any extra elements to the design, to make that alignment less important or unimportant?
• If (or assuming that) it is important, how is it implemented?

I think it's wrong by two pixels at the moment, i.e. the right-hand text is two pixels too low.

I think it's difficult (perhaps impossible) to implement using CSS because:

• Font height is complicated
• The two bits of text are different sizes and different font faces
• The font families aren't even known at design-time (it depends on which fonts exist for the user's web browser)

Is this a known problem? Is there a solution?

---

Should I instead try to align the baselines of the two columns, to look something like this:

But I don't think I know how to implement that either, using CSS.

Normally it (the baselines of the two bits of text aligning) would happen automatically, except here the two bits of text are not really in the same line (they're not both inline the same line box, in one parent block): because each column is a separate <div>.

Answer 1

CSS like the following is enough to implement the 2nd solution above:

#nav.notJumbo a[href='/']::after {
    content: ' ';
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

This adds, to the first line of the left-hand column, an invisible character (white-space) which has the same font metrics as the text at the top of the right-hand column -- this means the two line-boxes (left and right) have the same size: because they now include same-sized text.

Note:

• The selector is whatever is needed to select the first anchor (whose href references the web site's home page in this example)
• The content is an empty space, a white-space, here; you could replace that with a unicode thin-space or zero-width-space
• The other properties are whatever are necessary (including font-family if needed) to match the font and line-box metrics of the first line (e.g. the heading) of the right-hand column.

---

I suppose this solves the technical (implementation, how to) part of the question.

I'd still welcome other answers, which may comment on the design.