: Vertically centered colon for time 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

@Sherry646

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.

Vote Up Vote Down