Vertically centered colon for time

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

Vertically align colon

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?



<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.

Source : Link , Question Author : Randomblue , Answer Author : Yorik

Leave a Comment