3

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?

  • 1
    exactly "how" will depend on your implementation. Waht this is called is a baseline shift. From what I can see, this is an Apple type-rendering feature a la smart quotes or fractions: it looks for { colon surrounded by numbers} and {does magic}. If I had to roll my own, and had no way to query the specific height of the glyph, I would simply manual set the baseline shift for a decent sample of type sizes of the font I was interested in, and then see if I could derive an appropriate formula to generalize. – Yorik Mar 8 '16 at 19:36
  • As Yorik said, how will entirely depend on implementation. Could you edit your question with some more details on how you are implementing this? – Cai Mar 8 '16 at 19:52
  • I have updated the question to explain that my implementation is based on CSS and an .otf font file. – Randomblue Mar 8 '16 at 20:25
  • The (magic) mentioned above may very well be an OpenType feature, specific to the font. If it is, then there is no reason to assume that exact same feature is present in a wholly different font. It's like, since Minion Pro has a "Th" ligature, then assuming all fonts have one. You'll need plain old CSS Trickery in this case. – usr2564301 Mar 8 '16 at 20:47
  • It may be an opentype feature, but it is purportedly toggle-able for developers. I couldn't find any specifics on that, though from a user standpoint most of those features are classes so if they leverage "positional forms," and you want colon baseline shifting off, do you lose the other glyphs that rely on that feature? Enquiring Minds Want To Know! – Yorik Mar 8 '16 at 21:37
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.