To mark my recent birthday, my wife and I went to Vassa Eggen; great food and good service, I would absolutely recommend. Before going to restaurants I have a habit of checking the menu ahead of time. When doing this on this particular occasion, I found myself overriding their default style to make the menu easier to read. Below is an example of their unaltered menu:
They are using a receipt-based skeuomorphism. A common trend at present, particularly on Apple's iOS6 products.
There are various sites on the web that list readability guidelines. This post describes the following changes based on those guidelines:
- Making the text left aligned by removing the center alignment declaration;
- Removing 'Courier', leaving Arial to be used;
- Changing the line-height to 1.5;
- Increasing the font size to 10 point.
The proposed changes took a matter of seconds to implement, and this really goes to show that a few quick changes can really make a difference.
Center alignment does not allow for easy reading. It creates an inconsistent starting place for the reader, due to its "ragged" edges. In the below example, the orange rectangles represent the position the user's eye must go to before they start reading.
It is quickly apparent that left alignment provides a uniform vertical position for the eye to go back to. For right-to-left languages such as Arabic, right alignment would be best.
The change of alignment does not impact the skeuomorphic approach they are using. After checking some receipts I had, they all appear to be left aligned.
Courier, a serif font, is declared first on the stylesheet, followed by Arial, a sans-serif font. For a long time, sans-serif has been the recommended font type for web content, due to it being more clearly rendered on the majority of screens (low definition).
Below compares Courier and Arial:
Granted the improvement here is not as dramatic as the change of alignment. If you look at the first two characters 'Ox', Arial does seem to be clearer when comparing, at least on my screen.
Serif fonts better suit large font sizes, such as headings. The font size for the menu is 12px (10pt), and due to this sans-serif really should be used. Although, it is most pressing for content that has long passages of text.
Speaking of font size, at least 10pt should be used, which roughly equals 13px; this assumes senior citizens are not the target audience, otherwise at least 12pt is needed. I made the 10pt call based on the kind of clientele when I was there. However, that assumption would need to be verified more thoroughly.
As a side note, in CSS px should not be used for font sizes. Instead use percent or em, as these allow the user to resize.
When lines of text are placed too closely together, it becomes difficult to focus on a given line. Conversely, too far apart and they will look disassociated, like separate statements. A line height of 1.4 is currently being used, with the recommendation from classic typography books being 1.5, and the average being 1.48.
For this particular situation, line height becomes very valuable. Each item on the menu is first displayed in Swedish and then followed by its English translation. A larger line height makes each line easier to focus on, whilst still making them appear related.