: Font with ZERO spacing I'm looking for a font with ZERO spacing surrounding the characters, specifically numbers 0-9. Matching math symbols, specifically: +, -, ×, ÷, =, should be centered horizontally
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...
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.)
More posts by @XinRu324
1 Comments
Sorted by latest first Latest Oldest Best
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
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.