Solved

Font spacing in a column

Posted on 2013-12-13
6
238 Views
Last Modified: 2013-12-14
I need to display various street names in a column.  It could be "Fifth Ave" or "Lexington Ave", etc.

F
i
f
t
h

A
v
e


I want to use a san-serif font and I assume that it can't be proportional.

I tried "letter gothic" but the problem is that the capital "F" in the first row appears to the naked eye that it's further to the left than the rest of the column.  It's really not but because of the letter "F" and the letter "i" below it,  your brain makes that assumption.  I've tried left, center and right justification and they all give the same impression.

Any one know if there's a way to make this look pretty?  The customer doesn't care if it works, just so that it looks pretty!!!!
0
Comment
Question by:breeze351
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The problem you are going to run into is every browser and device may interpret things differently.  If the client wants to worry about precise spacing, I would make it an image.   The other issue is using fonts that most devices will have.
0
 
LVL 14

Expert Comment

by:quizwedge
Comment Utility
You could try using a web font and set left and right margin for letters. That is, "F" needs 1px of left margin, etc. Using a web font should mean everyone is using the same font, but the browser and operating system could introduce some quirks.

Padas suggestion of an image could work well, but assuming you need the images to be dynamic, you might want to try using a CSS Sprites. They can be a pain, but it'd work. http://css-tricks.com/css-sprites/ does a good introduction.

You could then set up css classes such as
.letter {
background-image:url('/img/image.gif');
}
.a {
background-position:0px 0px;
}
.b {
background-position:0px -72px;
}

Open in new window


You could then call
<span class="letter a">&nbsp;</span>

Open in new window

to generate an a.

One note, you'll probably want to have a separate CSS sprite for retina screens.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I don't think the image is really the way to go. My point is this is not a print magazine layout where you get everything exactly where it needs to be and everybody reads paper from the same press.   In the web, micro adjustments like you are looking for are going to be hard.

I have had similar clients and wouldn't take no for an answer so I just made it look good for their screen.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 11

Expert Comment

by:Amar Bardoliwala
Comment Utility
Hello breeze351,

Please look at following link,

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

In link above tutor has given 7 methods to achieve vertical text display using css and js.

Hope this will help you.

Thank you

Amar Bardoliwala
0
 
LVL 16

Accepted Solution

by:
DansDadUK earned 500 total points
Comment Utility
>> ... I want to use a san-serif font and I assume that it can't be proportional ...

It may, perhaps, be the case that, for your issue, the opposite is true.

With fixed-pitch fonts (such as Courier New, Letter Gothic), each glyph (character shape) is the same width, so that text in these fonts will be spaced evenly when text is laid out horizontally.

To achieve this, narrow characters (such as "i") have larger 'blank' areas (the Left Side Bearing and Right Side Bearing values) either side of the shape, compared to wider characters (such as "W").

This means that when the characters are presented vertically, they are not usually perfectly aligned vertically, because of the differences in the LSB values of the different characters.

Conversely, with proportionally-spaced fonts (such as Arial, Times New Roman), the glyphs are not all the same width (so will not be spaced evenly when text is laid out horizontally), but it is likely that the LSB values, although not all the same, will be within a smaller range of possible values, so they may align better when text is laid out vertically.
0
 

Author Closing Comment

by:breeze351
Comment Utility
I think the best way is padas solution.  Go with the image.   If I save the image in the database, I can just get it and display it.

I've written software for publishers so I am familiar with fonts and kerning but it's always been horizontal.

My partner is having his knee replaced on Tuesday so he'll be out of action for a couple of weeks.  He needs something to do while sitting around the house.  "Hey Chris, while you're sitting there here's what you can do."

Thanks
Glenn
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now