Vertically centered colon for time

Question 1

This article discusses the vertically centered colon in Apple’s San Francisco font.

My webapp uses the Montserrat font, specified in CSS as follows:

@font-face {
    font-family: 'Montserrat-Light';
    src: url('fonts/Montserrat-Light.otf');
}

* {
    font-family: 'Montserrat-Light';
}

I am struggling to get a vertically centered colon to display a time (e.g. 9:41).

How can I do a vertically centered colon with the Montserrat font in the context of a webapp?

Question 2

Consider:

<span class="hour">10</span><span class="minute">30</span>

And the styles:

.hour, .minute {
font-size: 60px;
line-height: 80px;
background-color: #aaaaaa;
}

And the colon gets added with a psuedo-class, uses EMs to shift the top upwards by 10% of whatever the type size (1EM = 100%; .1EM = 10%)

.hour::after {
content: ":";
position: relative;
top: -.1em;
background-color: #dddddd;
}

For an approximation of perfect, do a bunch of tests at different type sizes and see if you can find a good workable EM value for the font you want.

It is probably advisable for you to test this for browser support if you are not working with a single render target.

Answer