Typography and graphic layout

Many images do not stand alone. Photographs become posters, magazine spreads and web banners; video frames carry titles and lower thirds; social media posts combine pictures with headlines; thumbnails depend on a few large words. The moment text enters a frame, it becomes the strongest element in it, because viewers cannot help reading words. This lesson introduces the basics of typography and layout that every image maker needs: how typefaces differ and what they communicate, how to set type for legibility and hierarchy, how grids organize a layout, how to combine text with images, and how to design titles and thumbnails that work on small screens.

Anatomy and classification of type

A typeface is a designed set of letterforms; a font is a particular size, weight and style of it (in digital practice the words are often used interchangeably). A few anatomical terms help describe type:

• Baseline: the line letters sit on. Cap height: the height of capital letters. x-height: the height of lower-case letters such as x, which largely determines how big type looks at a given size.
• Ascenders and descenders: the parts of letters such as h and p that rise above the x-height or fall below the baseline.
• Serifs: small strokes at the ends of letter strokes. Typefaces without them are sans serif.
• Weight: the thickness of strokes, from thin and light through regular to bold and black.
• Counter: the enclosed or partly enclosed space inside letters such as o, e and a.

Typefaces carry personality as surely as colors do (Lesson 6). A condensed bold sans serif feels urgent and newsy; a light geometric sans feels airy and contemporary; a classic serif feels established. Choose type whose voice matches the message, then use it consistently.

Legibility and readability

Legibility is how easily individual letters can be distinguished; readability is how comfortably a block of text can be read. Both depend on choices the designer controls:

• Size. On screens, body text below about 16 CSS pixels becomes tiring; on video, broadcast guidelines suggest captions and titles no smaller than about 1/20 to 1/25 of the picture height for comfortable reading on television.
• x-height and openness. Typefaces with large x-heights and open counters remain legible at small sizes and at a distance, which is why signage and interface typefaces have them.
• Line length. Comfortable reading needs about 45 to 75 characters per line; longer lines make it hard to find the start of the next line.
• Line spacing (leading). Body text usually needs line spacing of about 1.3 to 1.5 times the type size; headlines can be set tighter.
• Letter spacing (tracking) and kerning. All-capital text and very small text benefit from slightly wider tracking; large headlines often need tighter tracking and manual kerning of awkward pairs such as AV and To.
• Contrast. Text needs strong value contrast with its background: at least 4.5:1 for normal text and 3:1 for large text under the WCAG guidelines (Lessons 1 and 6).
• Case. Long passages in all capitals are slower to read because word shapes are lost; reserve capitals for short headings and labels.

Hierarchy

A layout communicates in order: first the most important message, then supporting information, then details. Typographic hierarchy makes this order visible through contrasts of size, weight, color, case, position and space. A common rule of thumb is that each level should differ clearly from the next, for example by a factor of about 1.5 to 2 in size, rather than by small increments that look accidental. Many designers use a modular scale, multiplying sizes by a constant ratio such as 1.25, 1.333 or 1.5:

With a base of 16 px and ratio 1.5, the sizes are 16, 24, 36, 54 and 81 px, giving a harmonious set for body text, subheadings, headings and display titles. Hierarchy also comes from restraint: two typefaces (often a display face and a text face) and two or three weights are usually enough. Too many typefaces, sizes and colors destroy hierarchy because everything competes.

Grids and alignment

A grid is an invisible structure of columns, rows, margins and gutters that organizes a layout. Grids were developed by Swiss designers in the mid-twentieth century and are now built into web and app design. They make layouts orderly, consistent across pages, and quicker to design. Common grids include:

• Single-column (manuscript) grids for books and simple pages.
• Multi-column grids, often 12 columns for web layouts because 12 divides into halves, thirds, quarters and sixths.
• Modular grids of columns and rows, for complex pages such as magazines and dashboards.
• Baseline grids that align lines of text across columns.

Alignment connects elements visually even when they are far apart (the Gestalt principle of continuity, Lesson 1). Left-aligned text gives a strong edge and is easiest to read in most Western languages; centered text suits short, formal, symmetrical layouts such as invitations and title cards but is hard to read in long passages; right-aligned text is useful for captions next to images and in right-to-left languages. Every element should align with something; elements placed "by eye" with slight misalignments look careless.

White space

White space (or negative space, Lesson 2) is the empty area around and between elements. It is not wasted space: it separates groups of information (proximity, Lesson 1), gives the eye places to rest, and signals quality and confidence. Luxury brands and art galleries use generous white space; discount flyers fill every corner. A common beginner's error is to enlarge everything to fill the available area; usually the layout improves when elements are made smaller and given room.

Combining text and images

When text is placed over or beside a photograph, the two must work together rather than compete:

• Plan for text at the shoot. Photographers shooting for covers, posters and banners leave negative space where the headline will go, often in a sky, a plain wall or a blurred background, and shoot both horizontal and vertical versions.
• Place text in calm areas. Text over a busy, high-contrast background is hard to read. If no calm area exists, add a semi-transparent panel, a gradient overlay that darkens part of the image, or a subtle shadow behind the text.
• Avoid covering faces and key details, and respect safe areas: in video, keep titles inside the title-safe area, and in social media, avoid areas covered by interface elements such as profile names, buttons and captions (Lesson 1 introduced safe areas).
• Relate type to the image's lines and colors. Aligning a headline with a horizon or a building edge, or picking a text color sampled from the image, creates unity.
• Use the image's gaze and leading lines to point to the text, or the text to point back to the image (Lesson 9).

Thumbnails, covers and small screens

Much visual content is first seen as a thumbnail: a video preview, a podcast cover, a streaming tile, a search result. A thumbnail may be shown only 100 to 200 pixels wide, so it must communicate in a fraction of a second. Effective thumbnails usually have:

• One clear subject, often a face with a readable expression, large in the frame.
• Strong value and color contrast so the subject separates at small size (Lessons 1 and 6).
• At most a few large words, in a heavy, simple typeface, adding information the image does not show rather than repeating the title.
• Consistency across a series, using the same layout, typeface and colors, so viewers recognize the brand.
• Honesty: thumbnails that promise content the video does not deliver erode trust and are penalized by platforms.

Test thumbnails at their real display size, on a phone, and next to competitors' thumbnails, because a design that looks fine at full size on a monitor may disappear among others in a feed.

Type in motion

In video, titles and captions move and appear over time. Lower thirds, the name and title labels used in interviews, sit in the lower part of the frame within the title-safe area, opposite the side the subject faces so they do not block the face. Titles should stay on screen long enough to be read at least twice, roughly 0.3 seconds per word plus a second. Animation should support reading, not fight it: simple fades, slides and builds in the direction of reading work best. Captions for accessibility, required for much broadcast and online content in Canada under CRTC policies and provincial accessibility laws, need consistent placement, high contrast and readable size.