Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

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.

share|improve this question

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.
{"cc_re__cc_re__cc_by_sa_3_0": ["                  <li><a href=\"//area51.stackexchange.com\" title=\"proposing new sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"//careers.stackoverflow.com\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2015 stack exchange inc; user contributions licensed under <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a>                   with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2015.1.28.2240\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">User Experience Stack Exchange works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"><"], "copyright__copyright__copyright": [" The user is just going to flip the phone and read it, then go back to what they were doing\n\nSo I wouldn't worry about what font you use. Although the answer above has giving you a good starting point on your search.\n\nIf it was on a computer or laptop I would be more concerned.\n\nshare|improve this answer\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service.\n\nNot the answer you're looking for? Browse other questions tagged or ask your own question."]}