Solved

Font spacing in a column

Posted on 2013-12-13
6
241 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
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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to Chain multiple custom filters with AngualrJS 3 34
Synchronizing CSS load 3 29
iframe detection of parent window scale 20 60
Form with Modals 16 42
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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

919 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

19 Experts available now in Live!

Get 1:1 Help Now