cft

Writing styles for a better UI and UX

Design elements per writing style


user

Pieter Heyman

3 years ago | 2 min read

Every product team should make an informed decision that makes sense for its own brand. Often there are many inconsistencies in a product/platform. Every product will benefit from a well thought through set of rules of writing styles.

Capitalization

“Capitalization (North American English) or capitalisation (British English) is writing a word with its first letter as a capital letter (uppercase letter) and the remaining letters in lower case, in writing systems with a case distinction. The term also may refer to the choice of the casing applied to text. “ —https://en.wikipedia.org/wiki/Capitalization

Capitalization affects readability, comprehension and usability. It impacts how people view a brand. There are 3 types of capitalization: “Title case”, “Sentence case” and “ALL CAPS”.

Title Case

  • Capitalize every word
  • Gives a visual rhythm to your words
  • Professional, serious, established
  • Gives words a feeling of formality and importance!
  • Stands out more

Sentence case

  • Capitalize only the first word
  • Easier to read
  • Casual and friendly
  • Easier to spot proper nouns (app names, product names…)

ALL CAPS

  • Makes text more difficult to read and scan
  • Can be experienced as shouting to the user
  • Makes readability slower
  • Stands out more in a UI
  • Can be a good option where reading is not involved in a sentence

Proposed set of rules

  • Use ALL CAPS only for buttons, tags and states
  • Never use a sentence for a button (less then 4 words)
  • Use TITLE CASE for navigation elements and location indications (page title …)
  • Use TITLE CASE for names, persons, nouns, places (streets, countries, cities …)
  • Use SENTENCE CASE for all other elements to improve readability

Some examples

Navigation

Example: Writing styles applied to navigation elements like menu items

Form Elements

Example: Writing styles applied to form elements like dropdowns

Buttons

Example: Writing styles applied to the label of buttons

Design elements per writing style

Based on the set of rules (see paragraph above) this is a proposed ordering of design elements per writing style type.

ALL CAPS

  • Buttons
  • Tags
  • Status

Title Case

  • Account name
  • Event name
  • Page Title
  • Tabs main navigation
  • Tabs page navigation
  • Wizard step names
  • Table headers
  • Section headers
  • Dashboard widget titles

Sentence case

  • Page sub titles
  • Page intros
  • Body text
  • Hyperlinks
  • Form labels
  • Form input field
  • Form placeholders

All though a product team can follow a pre-chewed set of rules, the set of rules should still fit the brand of the product / company.

Originally published on medium.

Upvote


user
Created by

Pieter Heyman


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles