It's a legal compromise really.
From an article on the New York Times:
The design of modern billing blocks illustrates the tension between two intersecting interests: studios want uncluttered marketing materials, and industry organizations want their members prominently and fairly credited.
Thus, it is neither accidental nor for aesthetics that the ...
First of all, if you are just looking at a text list of ingredients then I would say that it probably isn't going to matter too much which option you go for.
Out of the 3 options I would personally prefer the "bold amounts" option. The reason being is that the quantity is the part of the recipe that a person is more likely to need to look at more ...
The trick is to not look at it as data or key-value pairs, but how the user would review it.
For each data point evaluate what it means for the user.. e.g.
Acreage .046 - does that mean anything to the user ? How much is .046 acres.. they care about the size of the lot. For smaller lots you might want to user different units.
Then you have square footage ...
You want to look to sites such as W3.org for advice on this.
Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.
The W3C accessibility guidelines 1.4.8 state (emphasis mine):
Monospaced typefaces do reduce legibility, albeit by a margin.
In Universal Principles of Design, the entry on legibility states:
Proportionally spaced typefaces are preferred over monospaced.
One famous research on this is Beldie I. P., Pastoor S. & Schwarz E, 1983, “Fixed versus variable letter width for televised text”, Human Factors, 25, pp.273-...
Research generally suggests light on dark is harder to read in most cases but considering we're talking accessibility, you should know that results for those with normal vision don't necessarily hold true for those with various vision impairments.
I've heard higher contrast (the mode in Windows is called High Contrast mode I think) can be easier to read for ...
I think you're trying to solve a readability problem the wrong way.
Line length (measure) is your real problem. The number generally advised for a readable measure is about 60-70 characters. Cut the measure to about 60% of it's current length and you'll find you have far less trouble. The other way to solve it is a bigger font size ... that would be really ...
I think that the closest answer is: a compromise between visibility and legibility (which of course created some standard with time, or even: best practice).
The main purpose for that is the need to fit as much text as possible, while still keeping the letters quite big (this is why the letters are almost always capital here as well). Fonts used here are ...
An article Optimal Line Height says:
Typography references consistently put ideal line height at 1.2 ems (a measure of type equivalent to the the letter height or point size of a typeface).
The main purpose of defining a proper line height is to make the text paragraph look solid and be pleasant to read (if you choose a bigger line height the ...
Darkhorse Analytics has one of the easiest to understand explanations for improving tables
The points relevant to alignment of table data are:
Left align text (where appropriate)
Right align numbers (where appropriate)
Align titles with data
Resize columns to data
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 ...
They're focussing on visual consistency, at the price of accessibility. It's not how the Web is supposed to work, but it's not much of a surprise that Apple take this stance, given their extremely successful marketing campaigns.
I think this is influenced by personal preference and the width of the block of text. The wider the block of text, the bigger the line-height should be in order to keep your eyes on the same line while reading it.
Personally, I like the line-height to be 1.5em or 1.6em.
This Interactive Guide to Blog Typography has a section about line-height which also ...
No single answer
Unfortunately, there's no single value of line-height (leading) that is optimal for all situations. An optimal range is probably roughly 1.3–1.7, but to select an optimal value requires we look at the specific font in use and the width of lines of text (among other things).
In Troy Templeman's excellent article Basic Rules of Good ...
This is most prevalent with hand-written numbers as some people draw their 1's like their 7's. The dash is used the differentiate the two from each other.
With respect to this specific case, I assume it is for the same reason - because the number is along a curve the 7 could be interpreted as a 1, so the dash was added for clarity.
I don't think I have ...
4 digits is time-tested chunking for large numbers
3 to 4 digit chunks are easy to read accurately. Perceptually, the eye tends to read words and not letters across a page, and a 3-4 letter word allows the eye to read the end points and the middle letters of the word accurately without disorientation. Once the word gets too long, the letters in the middle ...
Without having previous experience in this regard, if this were a personal project I would consider some logical aspects in terms of graphic elements. Regarding colors it's obvious there must be a maximum contrast, so I only refer to the type of colors to choose.
1 - Avoid large white or light surfaces
It's widely known that in optics a white surface ...
Here is an extract from a very handy article on this:
Unfortunately, just knowing the optimal line height for a given font
size is not enough.
All 3 typographical dimensions—font size, line height, and line
width—affect one another. Therefore, you cannot talk about line height
or font size without also considering the line width.
Based on ...
Readability is everything
Smashing Magazine conducted a Typographic Study for best User Experience. What they found is plain clean backgrounds with standard type treatments tend to work best. People will typically have an easier time reading what they're familiar with. There is no one set rule for the number of characters per line. It depends on the amount ...
So, how do you define the minimum value?
Tuftes’ data density is really about three principles: (1) Above all else, show the data, (2) Maximize the data-ink ratio and (3) Erase non-data ink. In its extreme this could be interpreted as small as possible human could read. We’re talking about font-sizes as small as 3 pixels, but practically 5 pixels which is ...
If the column is a text, left-align it
If the column is a number or number + unit, right-align it (like excel)
If it's a multi-part value separated by a common separator (like 1024 x 768 is multi-part value separated by x) then align by a separator.
CSS for this would be something like text-align: 'x' center;
(Reference: Web typography book)
The purpose of zebra striping is (with arguable success) to connect items in a row that are a distance apart...often as you'd see in a table and where scanning (rather than reading line-by-line) is often a goal.
Item Item Item
But a paragraph of text has no such problem--the lines of text, themselves, make the ...
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 ...
Black text is not the problem. Glaring white background is. That background glare is the cause of eye-strain. Grey text just makes that worse as users often strain to read - which is why grey text often takes longer to read than black text.
In fact, many people can "see" a whole page of black text and get a sense of the message in an instant - almost ...
Its kind of hard to figure out what might the exact issue with the layout of the text without having to see it but here is what this article (Practical Tips for Utilizing Columns of Text in Your Layouts) says about using multiple columns in websites
Many print and web designs you see today employ a simple, single
column design for the main text element....
Digit Span Tests
6 is the average
The adult average for the famous (auditory) digit span test is just above 6. The average for visual digit span test is roughly the same.
Around 80% of adult population will score between 5-8 in such tests, and people scoring 4 or below will be suspected of some cognitive impairment.
4 is the boundary
This means that most ...
additionally to @musefan's idea with a table: using a monospace font for the numbers (or everything) can help parse the entries faster visually. it also adds some "wrote that recipe on my typewriter" kind of vibe, giving the recipe more authenticity. ;)
According to recent scientific evidence:
18 and 22 points will lead to significantly improved objective readability (measured with eye-tracker)
10 and 12 points will lead to significantly impaired comprehension (measured with comprehension questions)
the larger the better, because objective readability continuously improves with increasing font size.
There are probably legacy reasons for this decision that should be considered, but there are at least a few reasonable explanations that I can think of:
Images allow complete control over typographical details such as tracking, kerning, ligatures and contextual alternates
CSS doesn't provide any author control over kerning or contextual alternates, very ...
I don't have references to hand, and Google is failing me, but my (very fallible) recollection is that:
bold text inline decreases reading speed / legibility
bold text increases "scannability" when searching since folk can easily find the bolded text
There are, of course, other options to highlight key points that will help readers find the important text ...