Typophile

How can I achieve consistent visual alignment with lowercase letters?

bsegovia

I know. The subject is a mess but as a typography noob, I just didn't know how else to word my issue. Perhaps an image would be better.

I need the entire alphabet visually aligned within the orange box above. This font, as with many others, does not align with a text box, which then requirs manual nudging.

I'm building a website that utilizes a user's input text (e.g. "h") that would impose on this design. The problem is that because the letters all align differently, it is causing a terrible output.

My question (to this fine typophile community): Is there some setting or attribute about a font I should look for to achieve what I am after? Are my hopes and dreams about automatic visual alignment simply that; hopes and dreams?

Luma Vine

Do you mean vertically or horizontally centered, or something else? What software are you working in? Does the text have to remain editable as text, or are outlines enough?

bsegovia

Hey Luma, thanks for the reply.

I mean vertically aligned. (the "g" in the example above is perfect.)

I'm working in InDesign and the text needs to stay editable unfortunately.

Nick Shinn

So, you mean visually centred vertically?

Luma Vine

So you want the very top of the letter to be exactly the same distance from the top of the box as the bottom of the letter is from the bottom of the box?

bsegovia

@Nick: Exactly.
@Luma: Yes. The top AND the bottom to be equidistant from the bottom and top of the box.

Nick Shinn

I don’t think there is any alignment information in the font which is directly useful.
However, you may be able to calculate how much of a baseline shift is required for each letter, and program that into the web site.
Alternatively, use a lining typeface—either all caps or unicase.
Here are a couple of mine:
Panoptica
Parity

bsegovia

LINING! Thank you! I've updated it to just take all caps. Desired outcome achieved! Thanks Nick and everyone.

Captured from web.archive.org on 13 Feb 2013. view this capture