Graphic design, oriented

A typeface is the design itself, the letter shapes that set one roman apart from another. In metal type, a font was an assortment of one size and kind cast to be used together. A family groups faces that vary in weight, width or slope but were drawn to match.

Serifs are the finishing strokes at the ends of stems, and they carry much of a face's character. Serif faces often show more thick-thin contrast than sans faces, whose strokes end plainly at a near-even thickness. Old-style romans have mostly diagonal serifs and modest contrast; one 1917 printing manual put it near two to one, against six to one in a later roman. Modern romans have straight, thin serifs. Slab serifs count as serifs but lack that thick-thin swing.

Size on the page is not point size. The x-height, how tall the lowercase letters stand without ascenders, largely decides how big text looks. Say you swap your body face for one with a taller x-height at the same point size: the whole page now reads larger. Size also changes the drawing, since small text reads better with thicker strokes and larger serifs.

The trap is borrowing weights and slopes the family does not have. Request a bold the family lacks and CSS substitutes a nearby weight, and an artificially sloped roman is not a true italic.

Rule: judge a face by its x-height, contrast and serifs at the size it will be read, and take bold and italic from the same family.

Kerning adjusts the space between particular letter pairs using data built into the font. Tracking applies one value across a whole run, on top of kerning. The U.S. Web Design System suggests looser tracking for very small text and all caps, and tighter tracking for large headings.

Leading is the space between lines, named for the metal strips once set between them. Longer lines need more leading so the eye can find the next line, and the same system treats 45 to 90 characters as readable and aims near 66 for long text. A Level AAA criterion of the Web Content Accessibility Guidelines (WCAG) asks that readers be able to get lines of 80 characters or fewer and to turn justification off.

Flush-left text gives every line the same starting point. Justified text spreads word spaces unevenly, and loose spaces can line up into rivers of white down a column. Centered lines suit headings more than paragraphs.

Hierarchy ranks text with size, weight, color and space, and the same system sets a heading closer to the text it introduces than to the text above. Say you float each heading midway between paragraphs: your reader cannot tell which block it belongs to.

The trap is using one spacing tool for the other's job. Opening the tracking will not fix one bad pair, and kerning will not relieve a cramped line.

Rule: kern pairs, track runs, add leading as lines get longer, and let space say which text belongs together.

Additive color starts from darkness and adds light: red, green and blue together make white. Subtractive color starts from white paper and takes light away, since cyan ink absorbs red, magenta absorbs green and yellow absorbs blue. Layered inks move toward black, so printers add a black ink for real density.

A hex color writes the red, green and blue channels of an sRGB color as pairs of base-16 digits, red first. In each pair the first digit counts sixteens and the second counts ones, so 9c is 9 times 16 plus 12, or 156. Shorthand doubles each digit, so #123 means #112233. HSL describes colors by hue, saturation and lightness, but its lightness ignores perception: pure yellow and pure blue share one HSL lightness, yet the yellow looks far lighter. Lab and its polar form, LCH (lightness, chroma and hue), were built from vision experiments so equal steps look even.

A gamut is the range of colors a device can produce. Process printing in cyan, magenta, yellow and black has a much smaller one than RGB working spaces, so a vivid screen color may have no printable match. A rendering intent decides how misfits move inside: relative colorimetric shifts only them, which suits flat colors, while perceptual may shift everything to keep photographs smooth.

The trap is treating color numbers as self-explanatory. Say you export a wide-gamut photo with its profile stripped: software reads it as sRGB, and its colors shift.

Rule: state the color space with the numbers, keep RGB masters, and expect vivid screen colors to change on press.

A color wheel arranges hues in a circle, but painters, screens and color notations each build a different one, so opposites differ from wheel to wheel. Complementary colors sit opposite: side by side they strengthen each other, and mixed they cancel toward gray. Analogous colors are neighbors and read as calm and related. A triad spaces three hues evenly, and a split-complementary scheme uses the hues beside a color's opposite to soften the clash.

Tints add white, shades add black, and gray dulls a hue. Saturation is a color's strength, and older color training taught that small areas of strong color balance larger weak ones, which is why an accent works by scarcity. The U.S. Web Design System offers a rough 60-30-10 split for its primary, secondary and accent families, with neutral text color the main tone overall.

Value does most of the work in contrast. Accessibility contrast is computed from luminance, not hue, so two hues of equal luminance give the lowest ratio possible. Neighbors shift appearance too: a gray beside green can take on a faint pink cast.

Say you mark errors and successes in two hues at the same mid lightness. In grayscale they become one tone, and a reader who struggles to tell those hues apart loses the distinction.

The trap is choosing a palette by hue alone. A scheme balanced on the wheel can still be one flat value on the page, and color meanings vary between people.

Rule: build the palette in lightness first, let area set emphasis, and pair every meaningful color with a second cue.

A layout grid sets columns, the gutters between them, and margins around the content. The U.S. Web Design System uses twelve columns, and twelve divides into halves, thirds, quarters and sixths, so three equal columns each span four. White space groups on top of the grid: less space binds and more separates, and the same system puts more space above a heading than below it.

Hierarchy decides what a reader sees first, second and third. A focal point is where the eye lands and returns, and isolation adds weight, so a small item set apart can outpull a crowd. Balance can mirror across an axis or work like a seesaw: one 1920 printers' manual showed a single unit balancing four placed four times as far out. A classic composition guide called the dead center the weak point and preferred thirds to halves.

Measurement and appearance disagree. A line centered exactly from top to bottom looks low, so printers raised it to an optical center, and a true square looks taller than it is wide.

On screens, layout has to reflow, not shrink. The WCAG Reflow criterion, at Level AA, asks that readers who enlarge content can read it without scrolling in two directions. Right-to-left scripts change the direction of the whole page.

The trap is designing around placeholder text. Say you balance a page on filler: it has never met your real message, its real lengths or its real order of importance.

Rule: lay out from real content on a grid, group with space, and adjust by eye wherever exact alignment looks wrong.

Perception sorts a page before anyone reads it. Elements close together read as one group, which is proximity. Elements sharing a color, shape or size group by similarity, and a strong enough difference can regroup a layout against its spacing. A shared border or panel groups what it encloses, a connecting line ties items into one unit, and items that move together read as one group. The eye follows smooth paths, so crossing lines read as two strokes, not four pieces.

Viewers also split a scene into figure and ground. Smaller, enclosed, convex or symmetric regions tend to become the figure, so a shape meant to recede works better large and open.

The design principles put these effects to use. Contrast says that two things differ, repetition builds a visual language readers learn, and alignment on shared edges lets the eye run down a column. Emphasis gives a first stop, but it works only by exception. Hierarchy is more than emphasis: a loud headline over uniform text tells readers where to start and nothing about what comes next.

Say you build a form where a label sits nearer the field below it than the field it names. People tend to read it with the wrong field, whatever the label says.

The trap is signaling difference where you mean sameness, or the reverse. Underlined text that is not a link, or two related items styled apart, sends a signal the content contradicts.

Rule: decide which items belong together, then make spacing, likeness and enclosure all say the same thing.

A raster image stores a fixed array of pixels; a vector file describes shapes mathematically and is drawn at whatever resolution the output offers. Logos, icons and type belong in vector, and photographs, with their smooth tones, in raster.

Print size is arithmetic: inches times the target pixels per inch. Say you have an image 2,100 pixels wide. It prints 7 inches wide at 300 ppi, and stretched to 14 inches its effective resolution halves to 150. The ppi value stored in a file's header is only a label and adds no pixels. Resize with the width-to-height ratio kept, or circles turn into ovals.

JPEG, named for the Joint Photographic Experts Group, discards detail in small blocks, which suits photographs but not line art; archives treat it as a delivery copy. PNG (Portable Network Graphics) compresses without loss and can carry per-pixel transparency. SVG is XML markup for vector graphics. TIFF (Tagged Image File Format) suits uncompressed masters, and the PDF/X standards constrain PDF for print, requiring embedded fonts and images for complete exchange. Keep the master lossless and make every lossy copy from it.

Bleed is artwork that runs past the trim line so an imprecise cut leaves no white sliver. Keep text and logos inside a safe margin, and proof on the real stock, since paper finish changes how much ink a sheet takes and how color looks.

The trap is changing the stored resolution number and calling the image sharper. Only the pixels you have count.

Rule: check pixels against the final placed size, choose vector or raster by content, and proof on the production stock.

Contrast ratio compares the relative luminance of the lighter color with the darker, each plus 0.05. Luminance is used because color vision varies too widely to prescribe safe hue pairs. Under WCAG 2.2's Level AA contrast criterion, normal text needs 4.5 to 1 and large text 3 to 1, where large means at least 18 points regular or 14 points bold. The Level AAA criterion raises those to 7 to 1 and 4.5 to 1. At Level AA, controls and meaningful graphics need 3 to 1 against adjacent colors.

Compare the computed value without rounding. Say you check a gray caption on white and it computes to 4.48 to 1: it fails Level AA for normal text, even though it rounds up to 4.5.

Under a Level A criterion, color must not be the only visual means of conveying information, so add text, shape or pattern. Level AA criteria require a visible keyboard focus indicator, and text that stays usable when readers enlarge it or override line, letter and word spacing. Fixed-height containers that clip growing text break both. A Level A criterion limits flashing, and a Level AAA criterion covers motion triggered by interaction.

Text over a photograph is measured against the part of the image behind it; a darkened band or halo keeps every letter at the ratio.

The trap is trusting how large a heading looks. A big but very thin face can still need the stricter ratio, because the allowance follows real size and weight.

Rule: compute contrast for every pair, never let hue carry meaning alone, and test the layout with text enlarged.

A wordmark makes the name itself the mark, and a lettermark uses initials. A pictorial mark uses a recognizable image, a combination mark locks a symbol to a wordmark, and an emblem sets the name inside the symbol. The U.S. Patent and Trademark Office explains that registering words in standard character format protects them in any font, size or color, while a special form registration protects how a stylized or designed mark looks. Orientation for study, not legal advice for any specific mark.

A brand is broader than any mark. GSA's graphic standards set its marks, palettes, typefaces, grids and stationery so that work from many teams reads as one agency, and the VA.gov content style guide does the same for voice.

Clear space keeps text and images away from a mark, and NASA, the Department of Energy and GSA each measure that zone in units of the mark itself, so it scales with the logo. Minimum size is the smallest size that still reads; the Department of Energy sets one in pixels for screens and one in inches for print. GSA warns that its seal loses detail, especially in the lettering, when greatly reduced, so it switches to its simpler Star Mark. NASA supplies one-color insignia, and GSA a reversed Star Mark for dark backgrounds.

The trap is forcing one detailed mark into every space. Say you shrink your full-color logo into a browser tab: its lettering and fine detail blur first.

Rule: design the mark as a set of versions, give each a minimum size and clear space, and let the simplest one carry the smallest uses.