14

I'm looking for some fonts that read well vertically. By vertically I mean text that runs at a right angle or perpendicular to the normal left to right. Like the words highlighted in yellow in this image:

enter image description here

The font should be free to use and in a format in which I could add it to an iPhone app which I'm developing.

EDIT 1

To clarify, the sample image I have used has nothing to do with my app. It was just a way to illustrate what I mean. So, yes, the font is aliased and is ugly, but it's not what I'm using, so no need to try to improve that.

And I know the iPhone can be easily turned vertically, but my application's main content is viewed horizontally with some text being placed vertically. In other words it will be mixed content that should have vertically running text that is easily readable.

closed as too broad by JonW Mar 13 '17 at 7:04

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Bold Calibri... – Dynamic Jan 7 '12 at 16:26
  • 3
    Does readability change when orientation changes? Why not a font that is readable when horizontal? – Taj Moore Jan 7 '12 at 20:47
  • 1
    Have you considered a design/layout that does not need vertical text? – Roger Attrill Jan 8 '12 at 10:02
  • @Jae: Calibri is not free and requires explicit licensing for embedding in an iPhone app – Kit Grose Feb 22 '12 at 16:28
  • Be aware, there are regional variations around vertical text; in the US, UK and Australia (at least) vertical text on book and DVD spines, etc. read top to bottom (since we generally read top to bottom and left to right). In continental Europe, those same spines are generally presented as your proof shows, bottom to top, which allows, e.g., a series of DVDs stacked horizontally (for instance, on a table) to be in order top to bottom with their spines readable and their covers facing up. – Kit Grose Feb 22 '12 at 16:32
10

I can't provide a definitive answer, but I can provide a little logic.

When viewing vertical text, you are essentially viewing normal text in an unusual situation, so in order to ease the situation it seems like a good idea to remove typographical cues that make reading in an awkward situation even harder.

So sans-serif would be a logic first step to removing intricacies and... well...serifs.

However, you should also consider any straight edges at the ends of strokes - these also make oddly oriented text look more different - but if you used a rounded font, the rotational effect is less obvious at the ends of the strokes - essentially because circles look the same at all rotations.

Luke Wrobleski did a poll (July 2010) of peoples's favourite rounded sans-serif fonts and Gotham Rounded and VAG Rounded were easily the most popular.

For the above reasons, and barring someone else finding research to the contrary, I would seriously consider one of those two.

Here is a vertical rendering of the first three from Luke's article above.

enter image description here

  • 3
    The Gotham collection is simply fantastic. But not free. – Nic Jan 7 '12 at 20:50
  • 1
    Aaah - and that is a great shame! – Roger Attrill Jan 7 '12 at 23:20
  • 1
    Gotham is not only not free, it's not currently available for licensing for embedding. – Kit Grose Feb 22 '12 at 16:24
3

This is really more of a visual design and branding question/preference than a true UX issue. Your provided example suffers more from being heavily aliased or distorted than it does from any flaws with the typeface itself. You'd never experience distortion like that with live text in iOS.

If you're in doubt, why not use Helvetica Neue, the default font for iOS 5? For mockups you can use Helvetica or even Arial if you'd don't own Neue.

enter image description here

  • Fun fact: Arial isn’t Microsoft’s imitation of Helvetica. MS Sans Serif is (and a pretty bad imitation IMHO). – kinokijuf Jan 8 '12 at 9:51
  • I agree with you: Helvetica is an extremely appropriate font choice for this. Since iPhone development requires a Mac, and Mac OS X includes Helvetica Neue, the OP most certainly has access to Helvetica Neue for mockups (provided he uses the Mac to do proofs). – Kit Grose Feb 22 '12 at 16:27
3

Very interesting question, and it touches some core "low-level" typography principles. So here is an informal insight from what I've learned from own experience.

I would name two important factors here.

  • Fonts which are exploiting variable stroke width and serifs.

So, here it goes directly into one mysteriuos phenomenon which makes text more readable, namely variable stroke width. For example let's take Times New Roman:

enter image description here

As seen the initaial glyph structure has thicker strokes in the direction shown with an arrow (ca. north-west to south-east).
Now you would probably ask: how this direction is determined? The things is, this is non-answerable formally, and this direction is determined experementally, and the mystery is, that namely this direction makes better optical results than others, so this is quite unexplainable phenomenon.

Serifs are also subject to this 'sight orientation dependency', since they are part of the glyphs and similar principles apply.

So here are two possible way-outs:

a) Simple way: use a sans-serif font with constant stroke width.

b) Harder way: develop or find a font which is initially developed with that in mind, namely where strokes width, (for horizontal direction), are thickier in perpendicular direction (north-west to south-east) so when you put it vertically, they will be thicker again in correct direction. And respectively the serifs which are made specially for vertical text.

  • Proportion of glyphs

Again, quite unexplainable thing, I have noticed that same glyphs, when put vertically can be read easier when one squishes them, i.e. a narrow font variation will be better readable in vertical orientation.

Here is one related optical illusion:

enter image description here

Look at the picture and guess, what is a perfect circle and what is an ellipse here? One probably would say that on the left is a perfect circle, and on the right is an ellipse.
The answer is, both are ellipses, and those are same objects, rotated by 90 degrees.

In other words, if one watches a movie which is stretched horizontally by, say 105% and then watches the same movie stretched vertically by same 105%, then one more probably notices this defect in the second case.

This means, a highly proportional font, like e.g. Perpetua, will be bad choice for vertical orientation, but if made narrower, will work better.

So, as a very simple solution, I would take a narrow sans-serif font with constant stroke width.
To solve this the hard way, one should develop a font which takes the orientation in account, or try to find such a font (I never heard of such, would be exciting to find one).

0

If you gave someone an iPhone with a font typeface displayed vertically. The user is just going to flip the phone and read it, then go back to what they were doing

So I wouldn't worry about what font you use. Although the answer above has giving you a good starting point on your search.

If it was on a computer or laptop I would be more concerned.

  • 2
    Unless the phone rotates the view :) (but point taken). – Todd Sieling Jan 8 '12 at 2:55
  • yeah that is something you would have to take into consideration if you were to use a horizontal font. – jamcoupe Jan 8 '12 at 2:59
  • 1
    User rotates smartphone to view sideways text -> view rotates to match new orientation -> RAGE – Ben Brocka Jan 9 '12 at 6:29

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