Hot answers tagged typography
35
Ideal line length is reasonably short or reasonably long; what's generally esthetically pleasing to read is generally a good indication.
Columns in a web context make sense only if you were focusing on very compact content; which defeats the purpose of using columns beyond beautification. The reason they don't make sense otherwise is not because they are ...
33
UPPERCASE text is harder to read because the shapes of all the uppercase letters are all rectangular and users are not used to reading text that way. Therefore it is harder to scan, less efficient, and consequently a bad thing for readability.
See also this article from UXMovement: Why Text in All Caps is Hard for Users to Read. And quoting from that ...
29
I believe high contrast such as black on white can cause eye strain. Also there is evidence that it is particularly bad for people with dyslexia. For further info:
http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
http://www.dyslexiacentre.co.uk/dyslexia.htm
WCAG provide details on what is acceptable colour contrast, but ...
27
It depends on how you are using it.
All caps can be fine when used correctly. The site you have referenced does look slightly odd to me, this could be because of the typeface itself. Certain typefaces such as Trajan Pro and Bebas consist of only all caps characters. These types of typefaces are usually used very successfully in headers and titles. The ...
23
Here's an article on it. To quote the article's quotes:
However, most studies have shown that
dark characters on a light background
are superior to light characters on a
dark background (when the refresh rate
is fairly high). For example, Bauer
and Cavonius (1980) found that
participants were 26% more accurate in
reading text when they read ...
19
I hate to be this guy, but The W Blog has an article digesting some research suggesting that the presumed "letter shape" theory is incorrect on why CAPS LOCK is harder to read. It's a good article that cites real research you can delve into as deeply as you like, it suggests that the presumed reasons (letter shape ect.) for why UPPERCASE is hard to read are ...
19
For two main reasons,according to Microsoft posted 3 days ago:
We’ve chosen to use uppercase styling in the top menu for two main reasons: 1) to keep Visual Studio consistent with the direction of other Microsoft user experiences, and 2) to provide added structure to the top menu bar area.
On the first point, the use of uppercase text is becoming a ...
16
It depends. It depends mainly on how users will be locating the data they are interested in.
Numerical Stats in a Row
If the page is repeating the same stats groupings in the same order, then positional memory will be used, and the numbers themselves also cue the reader in to positioning - Best bowling 5/45 has a different form to Economy Rate 1.51 and ...
16
Yes. Jakob Nielsen did a study many years ago and found that users like reading text that's easily scannable.
Scanning can save users time. During
the study, 15 participants always
approached unfamiliar Web text by
trying to scan it before reading it.
Only 3 participants started reading
text word by word, from the top of the
page to the ...
15
Legibility depends on high contrast between foreground and background, so black-and-white is the safest bet. See for example:
Hall RH & Hanna H 2003. The Impact of
Web Page Text-Background Color
Combinations on Readability,
Retention, Aesthetics, and Behavioral
Intention, Laboratory for
Information Technology Evaluation,
Technical Report ...
15
I believe the cause is that handwriting generally has a higher x-height than printed type.
That makes all-caps handwriting look more like printed small-caps, which are generally not considered rude, and actually end up looking formal.
It's also true that all-caps used on the web now carries the connotation of screaming by convention (as mentioned by Juan ...
14
Those are called "pull quotes"
Used to attract attention, especially in long articles, a pull-quote is a small selection of text pulled out and quoted in a larger typeface or using some other formatting distinct from the rest of the article. A pull-quote may be framed by rules, placed within the article, span multiple columns, or be placed in an empty ...
13
Caps are an effective way of introducing visual hierarchy without increasing point size or using bold. All-caps can make small text seem more important or conceptually higher in the hierarchy than larger text.
Metro, being highly typographic, requires designers have a significant degree of freedom to express visual hierarchy without resorting to colour or ...
13
My guess would be that it's so the text renders consistently across all browsers. Not all browsers support font face. So images are the only way to have full control of the experience.
Many of the visitors to that page might have a old PC. So rather that risking having the page destroyed by improper rendering they show an image. So that the site conveys ...
11
Considering your content is like most where the user will be reading the data more often.
For example consider where your eyes go first:
-
Bowling Pins: 32
and now the opposite:
-
Bowling Pins: 32
-
They user will come to the page for the first time and: See the bold data, than look at what they represent.
The user will return to look up the data ...
10
Headings may use the same font as the body, but they are not required to. Plenty of great typography uses different fonts for the body and headings. In fact, there are fonts specifically designed for each purpose -- "text" faces for the body, and "display" faces for headings, titles, posters, and so on.
If you have a single good font, it is acceptable, ...
10
It's well known that greater variance in letter height aids readability since it makes letters more distinct. In this case your problem is the Ascender Height vs the X-Height (or possibly the Cap Height).
The readability of All Caps text has long been known to be poorer than normal type, mostly because the lack of variation in letter forms. Mixed Case is ...
10
Thought this was funny ... someone has already created a hack to turn the visual studio ALL CAPS Menus back into lowercase. (I realise Microsoft have said they will expose this functionality themselves... but this demonstrates someone with a level of urgency).
The point here is that many people really find ALL CAPS hard to read and/or aesthetically painful ...
10
All capital handwriting is easier to read because it takes more time to write and forces the author to slow down. This increases legibility by requiring the writer to compose each individual letter one at a time. The variations for capital letters are less compared to lower case or cursive characters. Architects and engineers developed their particular ...
9
Depending on the nature of data, you can use Tufte's Sparklines. This approach combines text, color and small graphics. Google Analytics makes use of this approach in their control panel:
9
I've been scolded for using too much bold in SO questions, so I learned that...
Using too much bold disrupts your natural reading rhythm,
but some italics and bold can be helpful in appropriate quantities.
If your text contains a lot of highlighting or bold, consider breaking it up into bulleted lists.
9
Caps are more difficult to read.
This is because all letters have the same height, requiring some additional scrutiny to recognize each word (we read word by word, not letter by letter).
So you can use caps to EMPHASIZE a short heading, but if you use it all along the text your readers might quit reading early because of the additional effort, i.e., slower ...
8
Yes, mixing different fonts and typography is perfectly fine, so long as it is done tastefully. My approach to mixing different fonts is to give each font a purpose or a voice. The App would have a particular voice and the fonts would correspond to its personality. While things requiring input from the user would have a different font/voice. Using that as a ...
7
Timothy Samara in Design Elements: A Graphic Style Manual provides interpretation of the colors black and white. Samara tells us that the color black is "extreme [...] the strongest color in the visible spectrum." He further calls it dominant and also typical of the feeling of nothingness. The color white, on the other hand, is described as being both the ...
7
First of all 13px Arial isn't a standard. Arial is commonly used for, I guess, couple of reason:
It's decent when it comes to readability (though people tend to
disagree, as in this Typophile discussion)
It's plain sans-serif font treated often as wider spread equivalent of
Helvetica
It's quite old (early 80s)
It's packaged on Windows since early 90s and ...
7
Apple's corporate font is Myriad. Myriad is probably prohibitively expensive for someone at the scale of Apple to license to serve on their web site. Also, Apple probably doesn't want to pay Adobe tons of money just to support its design decisions for its marketing websites. Also it makes the site faster with less to download.
As for accessibility; the ...
7
For the most part the pros/cons of this come back to the classic Adaptive vs Adaptable interface argument, where Adaptive interfaces automatically adjust based on user interaction, and adaptable interfaces allow users to manually tweak them.
A problem with this in particular is that text size is an accessibility issue. Not everyone has the same eyes, so ...
6
Readability aside, different typefaces invoke different feelings.
Before you think about what typefaces and other graphical elements to use, you have to ask yourself what the site is about and what mood you want to establish.
For example, Serifs typically are used for more traditional publications, while Sans-serif are more playful. (I'm over generalizing ...
6
How about something like this:
Represent percentages as pie charts. They don't take as much space, there will be a visual differentiation between the different types of data, so the screen has more order to it, and it will be clear that bars always have meaningful width (whereas when you display percentages as bars, then in some columns their width is ...
6
Also check out this link: http://www.informationarchitects.jp/en/100e2r/.
They propose to have 100% font size (the browser’s default), 10–15 words per line (usually 50% of a browser window with default font), 140% line height — which sounds pretty reasonable for me.
Only top voted, non community-wiki answers of a minimum length are eligible
