Solved

Font spacing in a column

Posted on 2013-12-13
6
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 53

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 53

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

 
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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Printing customized headers and footers using html and bootstrap 3 79
Accordion won't close correctly 5 17
aria difference 2 22
Can't find an open element in HTML 5 55
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 i…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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