Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Im designing a DIV container that will contain some rows of text. Every row can contain 0 to 35 chars.

I need to specify a fixed width for the div, but I cannot predict how "wide" the string can be.

An example of strings (all 35 chars):

  • aeR1riPhah9chaicaegae7oobaiz8eiquoL
  • iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
  • da da da 35 chars text With CApital

As you notice, the glyph "i" is less wide than "L".

A possible solution could be to use a Monospaced font, but for some stylistic constraints I need to use Arial (or equivalent font).

The idea is to size the container considering a string that contains the largest glyphs, but I am not sure what is the largest glyph, especially if we consider all the UTF characters..

Any help, advice would be really appreciated!

share|improve this question

migrated from ux.stackexchange.com Jul 21 '11 at 11:04

This question came from our site for user experience researchers and experts.

    
it's W. You could try this out yourself - but someone already did the work for you :-) See this - stackoverflow.com/questions/3949422/… but personally I wouldn't design around the widest character as it's almost certainly going to be generally too wide if you allow space for 35 W's –  Roger Attrill Jul 21 '11 at 10:43
    
Thank you very much, that's just perfect! –  Rdpi Jul 21 '11 at 11:02
    
Also related: graphicdesign.stackexchange.com/questions/860/… –  e100 Jul 21 '11 at 12:26
3  
Consider your target audience. Are they realistically going to be using Arabic characters or will 99.9% of the users be using latin characters 99.9% of the time? If you're planning on accommodating the widest character 35 times in a row, you're likely affecting the rest of your design for the sake of the unlikely edge case. You may be better served to run a regex in your rendering function to guesstimate width. If too many non-latin characters are detected, apply an extra CSS class to reduce the font-size on that particular row. –  Farray Jul 21 '11 at 15:01
    
Further to Farray's point, █ usually gives a typical wide character width. Or M widths are the classic unit of measurement (hence em). They're not strictly the widest, but something strange will be happening if the average character in a string is wider than this. overflow: auto should cover very strange cases like this. –  user568458 Jul 26 '12 at 15:12
add comment

3 Answers 3

Just one thing to say:

WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

[EDIT] Update - OK - I concede there are some much wider characters: ؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁

share|improve this answer
    
Very much appreciated! wWwwW –  Rdpi Jul 21 '11 at 11:03
    
-1. While this is true for basic Latin, the question specifically says "the largest glyph" and "especially if we consider all the UTF characters". –  e100 Jul 21 '11 at 14:17
    
@e100. Yes - you are absolutely correct. I'm back ahead of you now though - can I have my vote back :-) –  Roger Attrill Jul 21 '11 at 14:47
    
Done................ –  e100 Jul 21 '11 at 14:55
    
I feel like I'm watching the "Wanda the Witch" skit from very early Sesame Street. :) –  Lauren Ipsum Jul 21 '11 at 18:47
add comment

Still checking, but in the set of Latin glyphs,

DŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽ

is looking pretty wide.

Or there's

‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱

Or maybe &#xfdfa "ARABIC LIGATURE SALLALLAHOU ALAYHE WASALLAM" (doesn't seem to render in the Tahoma used here):

ﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺ

Obviously these are extreme examples and it's very unlikely anyone's going to type these, but it underlines Farray's point above: you need to find a compromise that will cover the vast majority of cases for your audience, but not necessarily anything that might conceiveably appear.

share|improve this answer
add comment

Usually, the em dash is the widest glyph in any typeface. The italic f is the rare glyph that extends into the ascender and the descender space making it one of the tallest in any typeface.

A handy practical measure is an "alphabet" composed of the lower case letters a through z. A normal typeface is roughly 13 ems long. If the typeface alphabet is less, it is a condensed typeface suitable for composing narrow-measure paragraphs. Easily readable line lengths range from 1-1/2 to 2-1/2 alphabets.

An em is a horizontal distance that is the equivalent to the vertical height of the typeface. An em space for 24 pt typeface is 24 pts long. It's proportional to the typeface and varies with each different size.

share|improve this answer
    
That's a naive view of typefaces and doesn't apply to modern fonts. In modern fonts it's almost universal for there to be capital letters with accents above them, which are taller than the ascender on the f, and it's commonplace for there to be characters wider than an em space, especially when including things like ligatures and, as pointed out elsewhere, characters like ‱ (per ten thousand sign, nicknamed "basis points" in economics). –  thomasrutter Aug 27 '13 at 6:25
    
@ thomasrutter. Guilty. Meant to be used in context of all of the above. Also not meant to be exhaustive or complete. All was prefaced (framed) by "Usually." I can't see that I contradicted anything incorrectly. Also note the suggested alternative method I've used. Thanks for the slap. –  Stan Aug 28 '13 at 18:10
    
@ thomasrutter. The question was for the widest glyph in Arial. Thanx for all the stuff on the accent height that is irrelevant to the OP. I mentioned the rare quality for a glyph to extend into ascender, body, and descender zones as a bit of trivia. Do you know of many others? Do you know of any others? How many caps have a descender to qualify to dispute that bit of trivia? –  Stan Aug 29 '13 at 2:18
    
Ok, that's weird, I don't get what the point of your comments is. You were the one that brought up accent height, I pointed out you were wrong about it, and yet you criticize me for talking about accent height because it's irrelevant? Also, you were wrong about the widest character being the em dash in Arial, but you are still defending your answer because it may be correct for some other fonts (hint: it usually isn't, and at any rate this question was about Arial). I just don't see what you have to gain from those comments. –  thomasrutter Aug 29 '13 at 3:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.