2

I'm looking for a font with ZERO spacing surrounding the characters, specifically numbers 0-9. Matching math symbols, specifically: +, -, ×, ÷, =, should be centered horizontally and vertically in regards to 0-9 characters

My use case is that I will be using them individually and am trying to avoid having to create an image of each character, and then manually crop and align each individually. This is for a website.

Searching via Google has yielded nothing except for programming adjustments (CSS) that will affect the placement of characters within their bounding box, but won't diminish the actual box dimensions for a given, large, font size (eg: 30px). Adjusting line-height still results in whitespace top and bottom in the elements bounding box.

Seems so hard to believe that this problem hasn't been solved (and a font of this sort already created somewhere!)

Example...

enter image description here

UPDATE: I found as solution for my specific issue, but I am still very interested in thoughts as to an existing font that would alleviate the base issue (unnecessary space for accent characters, and drop characters). My understanding is that monospaced fonts only describe the space between characters (not vertical alignment.)

Improve this question
3
  • Have you looked at any Monospaced typefaces? they're designed to have the same bounding box size, however this is no guarantee the characters themselves will fit the same width. It should narrow down your search a little, however.
    – johnp
    Apr 14, 2016 at 2:35
  • I'm not sure I understand the issue. A typeface that has all its metrics aligning to the top/bottom of the numerals makes no sense at all. Creating such a font to get around alignment issues in a web browser (one of an infinite many places a font may be rendered) makes even less sense. Unless I'm missing something.
    – Cai
    Apr 14, 2016 at 12:21
  • It does for my use (dragging and dropping them onto another html element and being able to accurately detect if the actual content of the character, not its surrounding whitespace, is visible to the user or obscured.)
    – t.j.
    Apr 15, 2016 at 17:30

1 Answer 1

Reset to default
2

So, I found a solution.

It didn't result in changing the font (or creating one from scratch, as I was about prepared to do.) I fear this may no longer be the appropriate place for this (probably web dev, or regular SO) but will leave it here until told otherwise.

Using a pretty specific combination of CSS attributes (height, font-size, and line-height) I was able to get the desired effect.

Note, that previously the bounding box of the elements would extend beyond their containing DIV as in the sample image in the parent post (which was causing problems for me elsewhere and started this search).

Relevant code snippet...

span {
  font-size: 30px;
  line-height: 24px;
  height: 25px;
  border-bottom: 3px solid black;
}

Functioning JSFiddle

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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