Book Summaries | Refactoring UI - Designing Text

January 4th, 2024

Refactoring UI - Designing Text (Chapter 4)

This summary will serve to further cement my learnings taken when reading the fourth chapter of Refactoring UI, titled Designing Text, and I hope will provide some learnings to you as well.

Establishing a Type Scale

Choosing Font Sizes

  • Many interfaces suffer from inconsistent font sizes, leading to design inconsistencies and workflow slowdowns.
  • Establishing a type scale is crucial for maintaining consistency and improving efficiency.

Choosing a Scale

  • A linear scale is impractical; modular scales, based on ratios like 4:5 or the golden ratio, offer a more versatile approach.
  • Modular scales, while mathematically appealing, may result in fractional values and limited size options.

Hand-crafted Scales

  • For interface design, a practical approach involves manually selecting values, avoiding subpixel rounding issues and providing more control.

Avoid Em Units

  • Em units, relative to the current font size, can lead to unpredictable sizes. Using px or rem units ensures adherence to the chosen system.

Use Good Fonts

Play It Safe

  • For UI design, neutral sans-serif fonts like Helvetica are reliable choices, providing familiarity to users.
  • Trust the system font stack if all else fails: -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue

Ignore Typefaces with Few Weights

  • Typefaces with more weight options often indicate better craftsmanship, enhancing overall design quality.
  • In Google Fonts, filter for 10+ styles to select typefaces that are likely of better quality.

Optimize for Legibility

  • Consider the intended purpose of a font family and its design characteristics, aligning with the readability requirements.
  • Avoid using condensed typefaces with shorter x-heights for the main UI text.

Trust the Wisdom of the Crowd

  • Popular fonts are likely to be good choices, leveraging collective decision-making power for easier selection.

Steal from People Who Care

  • Analyzing fonts used by reputable design teams can lead to the discovery of high-quality fonts.

Developing Your Intuition

  • Paying attention to typography in well-designed sites helps develop a discerning eye for font quality.

Keep Your Line Length in Check

Line Length Guidelines

  • The ideal line length for paragraphs falls between 45 and 75 characters, ensuring optimal readability.
  • The easiest way to do this is using em units. A width of 20-35em will be in the right ballpark.

Dealing with Wider Content

  • Even with wider content, limiting paragraph width enhances overall visual polish.

Baseline, Not Center

  • Aligning mixed font sizes by their baseline provides a cleaner and more visually appealing look than center alignment.

Line-height is Proportional

Accounting for Line Length

  • The line height and paragraph width should be proportional for better readability, especially with long lines of text.

Accounting for Font Size

  • The line height and font size are inversely proportional, requiring taller line heights for smaller text and vice versa.
  • Emphasizing links subtly, with variations in font weight or color, is preferred over making every link visually prominent.

Align with Readability in Mind

General Alignment Principles

  • Text alignment should match the language direction, typically left-aligned for English.

Right-align Numbers

  • Numbers in tables should be right-aligned for easier visual comparison.

Hyphenate Justified Text

  • Justified text should be hyphenated to avoid awkward gaps between words.
  • This can be done with hyphens: auto

Use Letter-spacing Effectively

Tightening Headlines

  • Adjusting letter spacing can be beneficial, especially for headline fonts with wider defaults.

Improving All-caps Legibility

  • Increased letter spacing enhances the readability of all-caps text, compensating for the lack of visual diversity.

Further Notes

Given the tips in this section, here is an example tailwind.config.js file that attempts to adhere to the rules outlined in this section.

module.exports = {
  content: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.ts",
    "./src/**/*.tsx",
  ],
  theme: {
    extend: {
      fontSize: {
        "2xl": "1.75rem",
        xl: "1.5rem",
        lg: "1.25rem",
        base: "1rem",
        sm: "0.875rem",
        xs: "0.75rem",
      },
      fontFamily: {
        sans: ["Helvetica", "Arial", "sans-serif"],
      },
      fontWeight: {
        normal: 400,
        bold: 700,
      },
      lineHeight: {
        snug: 1.3,
        relaxed: 1.6,
      },
    },
  },
  variants: {},
  plugins: [],
};

In this example:

  • Custom font sizes ('2xl', 'xl', 'lg', 'base', 'sm', and 'xs') are defined.
  • The fontFamily property includes a safe and neutral sans-serif font stack.
  • fontWeight is configured for both normal and bold styles.
  • Custom lineHeight values (snug and relaxed) are provided for proportional line spacing.