Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Font spacing in a column

Posted on 2013-12-13
6
Medium Priority
?
251 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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718215
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
ID: 39718231
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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718284
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 39718653
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 2000 total points
ID: 39718724
>> ... 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
ID: 39719017
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

782 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