Skip to content

Guidance on all-caps legibility? #8

Description

@tkeenoy

Many common UI patterns adopt an all caps styling for some interface elements, notably buttons. Typically in old shcool typographic standards, this effectively puts the x height of the resulting text string roughly equivalent to the cap height of the font size selected. It's not good for anything more than 1-2 words, at which point it starts to interfere with readability (as opposed to legibility).

Is this factored into any of the research? Will it be factored into the 3.0 standard?

Issues I see:
Typically, capital letters are very slightly heavier in weight than lower case letters. However, they're not a full weight step (e.g. 400 –> 500) up, so a blanket rule of "treat it as one step up" wouldn't necessarily work. Here's a test I did using Helvetica Neue 400 and 500, comparing lower case L to capital i.
Screen Shot 2020-11-04 at 10 15 13 AM

Greater apparent x height won't necessarily produce better legibility based on the spatial frequency and contrast sensitivity curve. Or maybe the larger spaces inherent in capital letters do, in fact produce better legibility. This might need some empirical testing.

What does letter spacing do to the whole thing? Wider letter spacing should, hypothetically, create wider spatial frequency, improving both legibility and (to a point) readability. This is a classic typographic maneuver, especially with short titles (e.g. headlines, buttons). Letter spacing might want its own separate issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    TheoryDiscussion of the underlying theories of readabilityquestionFurther information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions