Graphic Design curriculum

A typeface is the design itself: the letter shapes that set one roman apart from another. A font, in metal type, was an assortment of one size and kind cast to be used together. CSS keeps the split, grouping faces that vary in weight, width or slope into one family.

A family groups faces drawn to match across weights, widths and slopes, which is why a bold from the same family sits better beside the roman than one borrowed elsewhere. Ask CSS for a weight the family lacks and it uses a nearby one, and an artificially sloped roman is not a true italic.

Serifs are the finishing strokes at the ends of letter stems. CSS counts faces with flared or tapering ends among serif faces and notes they often show more thick-thin contrast than sans faces. The serif carries much of a face's character; old-style and modern romans are told apart mostly by it.

Sans-serif faces end their strokes plainly and usually keep stems close to one thickness. A common convention puts serifs in long reading text and sans in interfaces, but federal web guidance calls that a norm, not a hard-and-fast rule, and notes that web readers accept long sans texts.

CSS files slab serifs under serif faces. What sets them apart from a roman is low contrast: an old printing manual shows that adding serifs to an even-stroked letter lends it dignity, but it still lacks the thick-and-thin variation that a true roman needs.

Script faces imitate handwriting: CSS groups them as cursive, styles that look more like pen or brush writing than printed letters. Their slope makes letters reach past their neighbors, so metal script letters had to overhang their bodies. Keep long passages out of them, as federal guidance warns italic can degrade readability.

Display faces are built for headlines and large sizes. CSS explains why size changes the design: small text reads better with thicker strokes and larger serifs, while large text can carry a more delicate figure with more contrast. In metal type, display fonts were also leaner, usually just capitals, lowercase, figures and points.

Every glyph in a monospace font takes the same width, which keeps code and columns of characters lined up. Because widths are fixed, kerning does not belong there; CSS calls kerning fixed-width glyphs an error. Code faces also need look-alike letters to be easy to tell apart, a point one federal design system makes about its mono face.

Old-style romans are told apart from later moderns mostly by the serif, which in most old-style faces projects diagonally. Their thick-thin contrast stays modest: a 1917 printing manual put it near two to one in an old-style face, against six to one in a later roman, and called exaggerated contrast nearly unreadable.

Modern romans grew from eighteenth-century types whose serifs were straight, thin strokes. Later founders filled in the corners slightly, so a straight, unbracketed thin serif marks the original style. Nineteenth-century types pushed thick-thin contrast further, and a printing manual warned that exaggerated contrast is almost impossible to read.

Grotesque is one of the names printers gave the plain, unadorned sans letter. An American founder called it Gothic, British printers said Sans-Serif or Grotesque, and German printers said Block. A 1917 printing manual still dismissed it as an unfinished roman, a sign of how crude the style first looked.

The baseline is the line letters sit on, with descenders dropping below it. In metal type, keeping that line was a manufacturing problem: founders once cast each font to align only with itself, until a lining system set faces of one size on a common line so different styles could share a line of text.

The x-height is how tall lowercase letters stand without ascenders, and it largely decides how big text looks at a given size. Two faces at one point size can look different sizes because their x-heights differ, so CSS can scale a fallback font to match. Very large x-heights can crowd accented letters.

Cap height is how tall the capital letters stand. In the book types older printers describe, a capital reached the height of the lowercase ascenders, while a small capital stopped at the height of the round lowercase letters. Capital versus lowercase is a difference of form, not only of size.

Ascenders are the parts of letters such as h and l that rise above the lowercase body; descenders, as in g, p and y, drop below the baseline. Their reach affects setting: in metal type, faces with long descenders had to be cast high on the body, and long descenders were sometimes made to overhang it.

A counter is the space a letter's strokes enclose or partly enclose. A metal-type primer sets it apart from the other blank parts of a type: the shoulder and beard lie around the letter, while the counter is the shallow place between the lines of the face itself, so it prints as white inside the letter.

A ligature joins two or more letters into a single glyph. In metal type it was cast on one piece of type, often in imitation of scribes. In OpenType fonts, CSS turns common ligatures on by default and leaves discretionary and historical ones off, so decorative joins must be asked for.

Contrast is the difference between a face's thickest and thinnest strokes. CSS notes that serif faces often show more of it than sans faces, and that large text can carry more contrast than small text, which reads better with thicker strokes. Push it too far and an old printing manual's verdict applies: nearly unreadable.

Type set small reads better with thicker strokes and larger serifs, while large type can be more delicate. Metal faces were cut differently for each size; variable fonts recreate that with an optical-size axis, which browsers set from the font size. A browser will not fake optical sizing if the font lacks it.

Kerning adjusts the space between particular letter pairs, using adjustment data built into the font, so awkward combinations fit evenly. CSS defines it for proportionally spaced glyphs only. In metal type the word meant a part of a letter that overhung its body, letting it tuck close to its neighbor.

Tracking adds or removes the same space between every letter in a run. Designers set default spacing in the font, so most text should keep it. Federal guidance suggests looser tracking for very small text and for all caps or small caps, and tighter tracking for very large headings.

Kerning works pair by pair from data in the font; tracking applies one value across a whole run. They stack: CSS applies letter-spacing in addition to kerning, so adding tracking will not fix one bad pair, and kerning will not open up a cramped line. WCAG uses tracking as its plain word for letter spacing.

Leading is the space between lines of type. The name comes from metal type, where compositors separated lines with thin strips of metal called leads. Spacing out the words does little for reading unless the lines are opened up in proportion, a point old printing manuals make plainly.

Line height and line length trade off. The eye has to find the start of the next line, so longer lines need more space between them, and extra line height lets a measure run somewhat longer. Federal guidance adds a caveat: too much line height makes each long line stand out on its own.

Measure is line length. Lines that run too long make readers lose their place on the way back to the next line. Federal web guidance treats about 45 to 90 characters as readable and aims near 66 for long text, and WCAG, at its strictest AAA level, asks that users be able to get lines of 80 characters or fewer.

Flush-left text gives every line the same starting point, which makes it easier to read, and unlike justified text it needs no stretched word spaces. Federal web guidance recommends it for most text; justified type, common in print, does not yet render well enough in browsers to count as best practice.

Justified text is stretched to meet both margins, so word spaces vary from line to line. That uneven spacing can open rivers of white and, in tight lines, crowd words until their boundaries blur. WCAG, at its strictest AAA level, asks that users be able to turn justification off, which matters for readers with certain cognitive disabilities.

Rivers are channels of white that line up through loose word spaces on successive lines and run down the column. They come from forcing lines to fill the measure, as in justified text. Older printers ranked them among a page's serious blemishes and put good spacing ahead of their own rules for dividing words.

Centered lines suit headings: compositors traditionally set the usual heading in the middle of the measure. In running text, though, centering removes the constant left edge that makes each new line easy to find, which is why federal guidance prefers left alignment for most text.

Flush-right text aligns on the right and leaves a ragged left edge, so every line starts in a different place. Federal guidance grants that right-aligned text has its place, but favors left alignment for most text, since a constant starting point is what makes each new line easy to find.

In CSS terms a widow is the part of a paragraph carried past a page or column break to the top of the next one. The widows property sets the minimum number of lines that must carry over, so a lone final line is not stranded. A block shorter than that setting keeps all its lines together.

An orphan is a paragraph's first line stranded by itself at the foot of a page or column, with the rest of the paragraph carried over after the break. The CSS orphans property sets how many lines must stay before the break. With orphans and widows both set, the browser places the break where neither end is left too short.

Hyphenation splits a word at a line end, usually at a syllable or morpheme boundary, to improve the spacing of a paragraph. In CSS it is a rendering effect only, so the stored text is unchanged. Older printers' rules still help: avoid more than two divisions in successive lines, and never trade good spacing for a rule.

A type scale is a fixed set of sizes chosen once and reused, so headings and body text step in consistent intervals instead of drifting. One federal design system draws a nine-step theme scale from a 21-step system scale and adjusts each step per typeface, so a step looks the same size whichever face you use.

Typographic hierarchy ranks text so readers can tell headings from body, and major points from minor ones, at a glance, using size, weight, color and space. Spacing counts as much as size: a heading should sit closer to the text it introduces than to the text above, and you can test the ranking in black and white.

Bold, italic and capitals all mark emphasis, and all of them lose force when overused. An old printing manual put it bluntly: where too much emphasis is attempted, none is secured. Federal web guidance agrees that long runs of bold or italic hurt readability, so keep emphasis to short spans.

Federal guidance says long stretches of uppercase have a serious negative effect on readability, so keep caps to a few words. When you do set caps, open them up: capitals fill more of the type body than lowercase, so lines of them need wider word spacing and leading, plus looser letterspacing.

True small caps are drawn as capitals about the height of the round lowercase letters, with strokes matched to the text. Shrinking full capitals instead leaves them too light; CSS notes that designed small caps keep the weight that suffers when text is merely resized. In quantity they grow monotonous, so keep runs short.

Lining figures share one height, while old-style figures rise and drop like lowercase letters, and an old manual held that they are harder to mistake for each other. Tabular figures share one width so numbers align in columns. CSS can switch among lining, old-style, tabular and proportional figures when the font includes them.

Use the right mark for the job. The GPO style manual reserves the em dash for a sudden break in thought, uses the en dash to join figures, and keeps the hyphen for joining such figures to a word. In metal type, quotation marks were built from two inverted commas and two apostrophes, so opening and closing quotes differ.

Faces from one family pair most safely, and older printers held them up as the model of harmony while calling a serif beside a sans incongruous. One federal design system lets a project use a serif and a sans side by side, and it handles the real trap, mismatched apparent size, by scaling each face to look the same size.

Typographic color is the overall tone a block of text makes, from light and open to dark and dense. An old printers' manual called a book page a study in color using only black and white. Uneven spacing breaks that even tone with rivers and dark spots, and federal guidance aims for medium density.

Readability is how easily you can read and understand extended text, and it depends on type size, typeface, line length, line height, white space and word choice. Legibility is the narrower matter of telling letters apart: a federal design system credits one face's large x-height for keeping it legible at small sizes. A legible face can still read poorly in a bad setting.

While a web font downloads, the browser follows a timeline. In the block period text renders in an invisible fallback; in the swap period it shows a fallback face and swaps when the font arrives; in the failure period it gives up. That visible swap is why fallback choice matters, and why CSS can size-match fallbacks.

Additive color starts from darkness and adds light. Screens mix red, green and blue light, and all three combined make white, while equal amounts of each give a neutral. Additive models describe transmitted light, so adding more light moves a mix toward white, the opposite of mixing inks.

Subtractive color starts from white paper and takes light away. Each ink absorbs part of the light: cyan takes red, magenta takes green and yellow takes blue, so layering inks moves toward black. Subtractive models describe reflected light, which is why printing and screens follow different rules.

RGB describes a color by the intensity of red, green and blue light, the way displays, scanners and cameras work. Equal values in all three channels give a neutral. The numbers name a specific color only once a color space is attached, and the web treats untagged colors as sRGB.

CMYK separates an image into cyan, magenta, yellow and black inks, the process colors of printing. Its gamut is significantly smaller than RGB working spaces, and converting from RGB swaps part of each neutral for black, a step you cannot fully undo. That is why federal digitization guidelines keep master files in RGB rather than CMYK.

In theory cyan, magenta and yellow printed together make black, but in practice a separate black ink is used to give black real density. Converting to CMYK also hands part of every neutral tone to the black plate, so dark neutrals lean on the black plate instead of on three inks.

A hex color writes the red, green and blue channels of an sRGB color as pairs of hexadecimal digits after a hash, red first. Letter case does not matter, and an optional fourth pair sets alpha. Because hex is defined only for sRGB, it cannot name the wider-gamut colors that newer CSS color functions reach.

Each hex pair is a two-digit number in base 16, using 0 to 9 and then a to f for ten to fifteen. The first digit counts sixteens and the second counts ones, so multiply the first by 16 and add the second. A pair of zeros means none of that channel's light, and the top pair means full intensity.

Three-digit hex is shorthand: each digit is doubled, so #123 means #112233. That doubling means shorthand can express only 4,096 colors, and a color whose pairs are not repeated digits has no short form. Four-digit hex works the same way, with the last digit setting alpha.

An alpha channel stores how opaque a color or pixel is, from fully transparent to fully opaque, alongside its color values. In modern CSS syntax you write alpha after a slash, or as the last pair of an eight-digit hex color. A half-opaque red is still red; alpha changes coverage, not hue.

HSL describes a color as hue, saturation and lightness, which makes it easy to build matching sets by holding the hue and varying the other two. Its lightness is the midpoint of the strongest and weakest channel, not a measure of perception: pure yellow and pure blue share one HSL lightness, yet the yellow looks far lighter.

HSV describes a color by hue, an angle around the color wheel, plus saturation and value, where value means brightness: a value of 0 is always black, and full value gives the color itself. That is the key difference from HSL, where a fully saturated hue sits at 50 percent lightness, so the two models give different numbers for one color.

CIE Lab sets lightness on one axis and two opposing color axes on the others, built from human vision experiments so equal lightness steps look evenly spaced. LCH is the same space in polar form, with chroma and hue. That makes the Lab family the place to build even ramps, though newer Oklab is more uniform still.

A gamut is the range of colors a device or color space can produce. No real device yet reaches everything the eye can see, and narrow gamuts miss very saturated colors such as those of a rainbow. Do not confuse gamut with gamma, the tone curve.

An out-of-gamut color is valid but cannot be produced by the device showing it, such as a vivid screen color sent to a press with a much smaller gamut. Something must map it inside, usually by lowering its chroma, and for photographs a perceptual approach may shift in-gamut colors too.

sRGB is the default color space of CSS and the assumption for any web color or image that carries no profile. Its gamut is small next to Display P3, which most modern screens can show nearly in full, so sRGB is the safe common ground rather than the full range a screen can display.

Display P3 and Adobe RGB both reach beyond sRGB. Most modern phones, laptops and TVs can show nearly all of P3, while Adobe RGB was designed to cover most colors of CMYK printers, extending sRGB mainly in cyans and greens. Either helps only if the image is tagged, so software converts it correctly.

A color profile, usually an ICC profile embedded in a JPEG, PNG or TIFF file, tells software which color space an image's numbers belong to. A browser then converts tagged colors for the display it is running on. An image with no profile, or an invalid one, is treated as sRGB, which shifts it if it was really something else.

A rendering intent is the rule for bringing colors into a smaller gamut. Relative colorimetric leaves in-gamut colors alone and moves only the ones that do not fit, which suits flat colors and gradients. Perceptual may change in-gamut colors too, keeping the relationships between neighboring pixels that matter in photographs.

A spot color is printed with its own ink, mixed to the wanted hue, instead of being built from the cyan, magenta, yellow and black process inks. A 1923 printers' ink guide gives mixing formulas for such inks, including greens and grays made from two-color mixtures.

Process printing builds every color from a few standard inks overprinted, and one old ink guide advised printing the lighter colors first. A spot ink is a single color mixed in advance. Process covers full-color photographs, but its four-ink gamut is limited, so a vivid brand color may need its own ink.

A duotone prints one image in two inks, so the second ink colors every tone it overlaps. Printers knew the effect from overprinting: a 1923 ink guide notes that transparent yellow printed over black turns the blacks greenish, and red over black turns them purplish.

Bit depth sets how many levels each channel can store: 8 bits per channel gives a few hundred shades, 16 bits tens of thousands. Eight bits covers most viewing, but heavy corrections can make shades drop out and leave visible steps, called posterization, so make big edits at high bit depth and convert at the end.

A color wheel arranges hues in a circle, but whose circle depends on the model. A painters' wheel starts from red, yellow and blue, a screen from red, green and blue light, and one early color notation spaced five principal hues around it. Opposites differ from wheel to wheel, so name the system first.

Primaries are the starting colors and secondaries mix two primaries. Traditional painters' guides use red, yellow and blue, and define tertiaries as mixtures of two secondaries, which yields muted colors such as olive and russet. Other systems insert intermediates between neighboring hues instead, so check which definition you are using.

Complementary colors sit opposite each other on a wheel. Placed side by side they make each other look stronger, but mixed they cancel toward gray. A balanced pair also needs matched strength; when one hue is far more intense, giving the weaker one more area restores the balance.

Analogous colors are neighbors on the wheel that share an ingredient, so they read as related and calm. Older color manuals called this the harmony of analogy, set against the harmony of contrast between unrelated colors. Neighbors also stay mild when mixed, while mixed opposites cancel each other toward gray.

A triad uses three hues spaced evenly around the wheel. A 1901 color manual, relaying an earlier writer, listed triads long used in paintings and decoration and noted that artists often chose them so two of the three colors were warm. It also warned that combining colors gets harder as their number grows, so give the three unequal roles.

A split-complementary scheme softens a contrast by using the hues beside a color's opposite instead of the opposite itself. True opposites share nothing, which is why they clash so hard; an old decorators' guide called a color set against a near-neighbor of its opposite a contrast analogy, still contrasting but easier to live with.

A tetradic scheme uses two complementary pairs, four hues in all. Each pair intensifies when placed side by side, so the scheme carries a lot of contrast, and older manuals warn that combining colors gets harder as their number grows. Area is the usual control: small areas of strong color can balance larger quiet ones.

A monochromatic scheme uses one hue in different tints, shades and grayed tones. Older color manuals treated these one-color combinations as the simplest harmony, with a caution: avoid pairing the extremes of a hue's range, the large intervals between its lightest and darkest forms.

A tint is a hue mixed with white, and a shade is a hue mixed with black. Mixing in gray gives a third scale, dulled rather than lightened or darkened, which older color manuals called broken tints. Each changes a color in its own way, so name the one you mean instead of saying lighter or darker.

Saturation, or chroma, is a color's strength. A mostly muted palette lets one strong color stand out, and the balance works by area: older color training taught that small areas of strong chroma balance larger masses of weak chroma. Keep the vivid color small and let quieter colors carry the space.

Value is how light or dark a color is, and it does most of the work in contrast. Accessibility contrast is computed from relative luminance, not hue, which is why one federal design system grades colors by lightness and suggests starting in black and white. Two hues of equal luminance give the lowest contrast ratio possible.

Reds, oranges and yellows read as warm, and blues and violets as cool; greens can fall either way, depending on how much yellow or blue they seem to hold. Cool colors tend to recede and warm ones to come forward, which you can use to push elements back or bring them closer.

Colors change with their neighbors. In the classic demonstration, two adjacent grays drift apart, the lighter looking lighter and the darker darker, most strongly at the shared edge. A gray beside green even takes on a faint pink cast, so judge a swatch in its real surroundings.

Color carries associations, but they are learned rather than universal. Federal design guidance warns that color's effects are often personal and cultural as much as physiological, so what feels strong and confident to one person can feel alarming to another. Test color meaning with the people you design for.

The 60-30-10 split is a starting heuristic, not a law: roughly 60 percent of the non-neutral color from a primary family, 30 from a secondary and 10 from accents. One federal design system frames it exactly that way, and notes that the neutral text color will often outweigh all three.

An accent color is saved for the few things you most want noticed, such as the main action. It works by scarcity: one federal design system gives accents about a tenth of a palette's color, and older color training taught that small areas of strong color balance larger quiet ones. Spread it everywhere and nothing stands out.

Neutrals carry most of a design. In one federal design system the base family is a neutral, typically a gray, used for text throughout and often the dominant tone of a site. The same guidance lists avoiding pure black text on a white background as helpful for some readers, including some with dyslexia.

Semantic colors are assigned by role, such as info, success, warning and error, not by taste, so each one means the same thing wherever it appears. Because color alone does not reach everyone, pair every status color with words or an icon that carries the same message.

Color vision deficiency most often makes reds and greens hard to tell apart; another type confuses blue and yellow, and men are far more likely to have it than women. Many people with it do not know they do, so a design that relies on hue alone fails them quietly. WCAG requires another visual cue.

Colors sampled from images make a good starting point, not a finished palette. Federal design guidance suggests collecting images that evoke the tone you want, finding what they have in common, and then matching those colors to a tested system palette, so the final choices still meet contrast needs.

A brand color system names colors by role rather than by look. One federal design system holds a large set of system colors and has each project choose a smaller theme: a neutral base, primary, secondary and warm and cool accents, each in graded steps from light to dark, so accessible pairs can be picked within the brand.

A dark theme needs its colors chosen again, because contrast depends on the lightness gap between text and background. One federal design system grades colors from 0 for white to 100 for black and asks for a gap of 50 grades for standard contrast, so text on a very dark background must be a much lighter grade.

A layout grid is the skeleton: columns, the gutters between them, and margins around the content. One federal web grid uses twelve columns inside a centered container with set side padding, and its gutters are opt-in, so space between columns is a deliberate choice rather than a default.

Dividing the width into equal columns lets elements span one, two, three or more of them while still lining up. Twelve works well because it divides evenly into halves, thirds, quarters and sixths: in one federal grid, three equal columns span four of twelve each, and items wrap once spans total more than twelve.

Margins keep content off the edge and frame it. On screens, federal guidance scales side margins with viewport width, from a small minimum on phones to several units on desktops. Book printers had their own proportions: top and inner margins about equal, the outer edge a little more, and the bottom the most.

Visual hierarchy orders what a reader notices first, second and third, using size, weight, color and position. A useful check is to strip color away: federal guidance suggests testing your core message in black and white with type scale and hierarchy, then adding color to support the order rather than create it.

A focal point is the one place the eye lands first and returns to. Composition guides plan a path that swings toward that single focus, and they note that isolation adds weight, so a small element set apart from a crowd can hold attention against a much larger group.

White space is an active tool for grouping: less space binds elements together and more space separates them. Federal guidance applies it precisely, putting more space above a heading than below it so the heading belongs to the text it introduces, and separating web paragraphs with space rather than indents.

Microtypography is spacing within a text block, the letters, words and lines; macrotypography is how content elements are arranged on the page. Federal guidance treats readability as a product of both, so check each one: generous page margins will not rescue cramped line spacing, and fine spacing will not fix a muddled page.

Symmetric balance mirrors a design across an axis, so one half matches the other. Printed pages are often symmetrical about the vertical axis, which still allows varied masses, but rarely about the horizontal one, since that would mean equal masses above and below and a division below the optical center.

Asymmetric balance works like a seesaw: a small mass far from the balance point offsets a large mass close to it. Printers' design manuals worked the arithmetic, with one unit balancing four placed four times as far out, but trained eyes do the job in practice, and isolation adds weight too.

Radial balance arranges elements around a center, as petals around a flower or ribs in a vault. A classic composition manual lists radiation as one of three ways to subordinate parts to a main idea, beside an axis and size, and warns that mechanical radiation alone looks commonplace; the relations still need fine adjustment.

Visual weight is how strongly an element pulls the eye. Size, darkness, strong color and isolation all add weight, and they trade off: small areas of strong color can balance large areas of weak color, and printers warned that the main display should never be lighter in tone than the minor text.

Placing the main element off center usually gives a livelier layout than putting it dead center. A classic composition guide called the center the weak point, recommended unequal divisions such as thirds rather than halves, and kept centered placement for formal work. Treat thirds as a way to avoid halves, not a grid to obey.

Page layout assumes a reading direction. In right-to-left scripts such as Arabic and Hebrew, the organization and direction of the whole page are affected, not just the lines of text. One language can even be written in scripts that run in different directions, so plan direction by script.

Rhythm is movement made by regular recurrence: repeating shapes, tones or intervals ties a design together. The intervals can be equal, as in a pattern, or unequal but ordered, as in a landscape, and a steady increase or decrease in size counts as rhythm too.

Consistency means the same decision handled the same way everywhere, so people carry what they learn from one page to the next. Federal design principles add a limit: consistency is not necessarily conformity, and different services can look different while still starting from shared solutions.

Proportion is the comparative relation of sizes, and a 1920 printers' manual held that equal masses are monotonous. Dividing a space unequally, about two parts to three, reads as more interesting than halves, and the difference in size tells readers which element matters more.

The golden ratio divides a length so the smaller part is to the larger as the larger is to the whole. A 1920 printing manual used a rough version, splitting a space two to three, since 2 is to 3 nearly as 3 is to 5, and it admitted the match is only approximate. It found the dividing point by repeated trials by eye, not by measurement.

Exact placement can look wrong to the eye. A line centered precisely from top to bottom looks a little low, so printers raised it slightly to the optical center. The same habit applies wherever measurement and appearance disagree: align what looks aligned, then check it by eye.

Shapes can look the wrong size even when measured exactly. A true square looks taller than it is wide, because the eye tends to exaggerate vertical lengths, so printers made an apparent square slightly wider than its height. Judge final shapes by eye, not only by the numbers.

Responsive layout reflows content to fit the screen instead of shrinking a fixed composition. A mobile-first grid starts with columns stacked and adds columns at wider breakpoints, and WCAG asks that content reflow so readers who enlarge it do not have to scroll in two directions to read a line.

Design from the real message rather than from filler. Federal design guidance says to start with your core message, refine it with type scale and hierarchy in black and white, and only then bring in color, and to test prototypes with real people early.

Contrast works because items with prominent differences in color or shape read as different kinds of thing, while items that share a look read as related. Strong dissimilarity also marks boundaries and pulls a region away from its surround, so reserve it for differences you actually mean.

Repeating the same colors, shapes and type treatments across a set of pages builds a visual language that viewers learn to recognize and follow. Repetition is not design by itself, though: a mere row of identical things has little interest, so space repeats with intent, at equal intervals as in a pattern or unequal ones as in a landscape.

When text blocks, columns and form fields line up on shared vertical or horizontal edges, the eye can run straight down a column instead of hunting for where each item starts. Usability research found that people prefer consistent alignments, and that columns which do not line up are hard to scan.

Space is a grouping signal: viewers treat items placed close together as belonging together, so a label that sits nearer to the wrong field gets read with that field. Keep everything about one topic in one group, place each label right beside what it describes, and leave wider gaps between unrelated groups.

Emphasis gives the eye a first stop, because brighter, larger or bolder elements gain attention before their neighbors. It only works by exception: emphasizing several things at once dilutes all of them, and a vivid decorative element can steal the first look from the item that actually matters.

Unity, which older printing manuals call harmony, comes from shared shapes, tones and colors that make the parts feel related. One 1920 manual's test is completeness: in a harmonious layout you feel no urge to change any detail. Unity still needs difference to hold interest; a strong design holds its varied elements together through what they share.

Variety is deliberate inequality among the parts, such as masses of different sizes or a layout that is not symmetrical on either axis. Equal masses repeated across a page read as monotonous, because the eye finds a range of sizes more interesting, but keep enough shared traits that the variation still looks intended.

Movement is the order in which the eye visits the parts of a layout, and it grows stronger as each unit leads more definitely to the next. Lines, arrows and a chain of related masses carry the eye through a page. Do not confuse it with a picture of something in motion, which shows action without directing the viewer.

Hierarchy ranks every item from most to least important, which lets readers scan one level at a time and revisit less. Emphasis singles out one dominant item. A loud headline over undifferentiated text has emphasis but no hierarchy: readers know where to start, but nothing tells them what comes next.

All else being equal, the elements closest to each other are seen as a group, which is how an even grid of dots turns into rows or columns when one spacing shrinks. Proximity can be overridden: give some elements a strong difference in contrast and similarity can reorganize the same layout against the spacing.

Elements that share a color, shape, size or contrast polarity are seen as belonging together, even when spacing alone would group them differently. The principle has a mirror image, dissimilarity: a patch of differing elements separates from its surround and gains a boundary, so likeness both groups and segregates.

Viewers tend to perceive an outline with gaps as a closed shape, so a few strokes or a broken ring can still read as a complete form. The term is used loosely: in the founding demonstration closure lost to good continuation, and critics have urged dropping the word, so name the specific effect you rely on.

The eye follows smooth, continuous paths, so two lines crossing in an X read as two straight strokes rather than four segments meeting at a point. A smooth line or curve is a reliable way to connect related items, while an abrupt change of direction weakens the sense that the parts belong to one path.

Viewers split a scene into a figure that stands in front and a ground that runs behind it. Regions that are smaller, enclosed, convex or symmetric are more likely to be taken as the figure, so a shape meant to sit in the background works better when it is larger, open, concave or asymmetric.

A reversible mark lets one outline carry two readings, so both the shape and the space around it picture something. Viewers do not find both readings equally: salient areas, where they fixate and what they already have in mind all shift which one appears, so check whether people actually see the hidden figure.

Elements that move together in the same direction are seen as one group, even when they are scattered among others. Shared motion is strong enough to break camouflage: a shape that vanishes against a matching pattern appears the moment it moves relative to it, so animate the parts of a group together.

Elements arranged as mirror images tend to be seen as members of one group, and symmetric regions are more likely to read as figure than as background. A page symmetrical about its vertical axis still allows full variety in the sizes of its masses, so a centered layout need not look static.

Items placed inside a shared border or background panel are seen as a group. Researchers class this as an extrinsic cue, like a connecting line, because the grouping comes from an added element rather than from the items' own color, shape, size or position, so a panel can group items that look nothing alike.

Elements joined by a line or a continuous region are seen as one linked unit, and the link signals that they are related. The effect reaches counting: when dots in an array are connected, people reliably underestimate how many there are, and one study that ruled out an attention account traced it to joined dots being counted as fewer objects.

The principle holds that perception settles on the best overall organization the conditions allow, usually described as the simplest or most regular whole. It is treated as the umbrella over the specific grouping laws, but critics argue it was never clearly defined, so treat it as a tendency, not a rule you can compute.

Every mark on a display either carries the message or competes with it. Remove extraneous elements, decorative clutter and surplus colors so the essential pattern stands out, because excess detail reduces legibility. Stop before coherence goes, though: thinning a display must not strip out the relationships it exists to show.

An element's look should advertise what it does: buttons that resemble physical buttons and blue underlined text are read as clickable. The failure runs both ways, since underlined or link-colored text that is not a link misleads people, and an image link with too few cues can be missed entirely.

People arrive expecting familiar controls to behave as they always have, such as radio buttons for one choice and underlined text for links. Reusing those conventions, and keeping your own labels and styles the same from page to page, lets people act without relearning; misleading cues slow them while they work out what an item does.

A visual system should show what just happened and what state things are in: which element has keyboard focus, which links were already visited and whether a process is still running. A short wait needs only a busy indicator, while a longer one calls for a progress indicator that shows how far along the work is.

Principles often pull against each other. Consistent heading styles fight the need to make one item stand out, and in usability studies denser pages were scanned faster while readers preferred moderate white space. Settle a conflict by deciding first whether speed or preference matters more for the page, then choose the principle that serves it.

A raster image stores a fixed number of pixels in rows and columns. A vector file instead describes points, lines, curves and shapes mathematically, with no fixed mapping to pixels, so it is drawn at whatever resolution the output offers. Many vector formats can also embed raster images, so a file's format alone does not prove every element in it will scale cleanly.

A vector shape has no fixed pixel grid, so it can be redrawn crisply at any size, which is why vector figures are recommended for being scalable. A raster has a fixed pixel array: printing it larger spreads the same pixels over more inches and lowers its resolution, and enlarging it cannot add detail its pixels never recorded.

Use vector artwork for logos, icons, type and other flat shapes that must reproduce at many sizes; GSA, for example, distributes its official marks as vector files alongside JPG and PNG copies. Vector formats also suit technical figures that combine line art and text, and some scientific publishers, such as IEEE and AAAS, ask for vector figures.

Use raster formats for photographs and other continuous-tone images, where tone shifts smoothly from pixel to pixel and there are no clean shapes to describe. Match the compression to the content: photographic codecs work poorly on bitonal or limited-palette images, which suit a lossless format with indexed color instead.

Pixels per inch describes an image or a scanner: how many pixels map onto each inch of the original or the output. Dots per inch strictly describes a printer laying down dots of ink. Scanners and editing software often use the two interchangeably, so check which one a specification means before acting on it.

Multiply each printed dimension in inches by the target pixels per inch to get the pixel width and height an image needs. The arithmetic runs both ways: divide an image's pixel dimensions by the target ppi to find the largest size it can print at that resolution before its pixels are spread too thin.

The resolution value stored in an image's header only relates its pixels to a physical size; it neither adds nor removes a pixel. Editing programs default to different values, often 72 or 96 ppi, so the same pixels can carry different labels. For an image built for screens, the pixel width and height are the numbers to control.

Effective resolution is an image's pixel count divided by the size it is actually placed at in the layout. Enlarging a placed photo lowers it and reducing the photo raises it, so an image that was fine at its original size can fall short once it is scaled up to fill a page or a cover.

To resize without distortion, change one dimension and derive the other from the original ratio of width to height. Stretching only one side squashes circles into ovals and changes the shapes of letters, which is why GSA and Department of Energy brand standards let a mark be resized only with its proportions kept intact.

JPEG's common modes compress by transforming 8-by-8-pixel blocks and discarding detail, typically shrinking files ten to twenty times. That suits full-color and grayscale photographs, but it works poorly on bitonal or palette images such as line art, and archives treat it as a delivery copy rather than a master.

PNG compresses without loss, and it handles indexed color, grayscale and truecolor images with an optional alpha channel for per-pixel transparency. It was designed as a patent-free replacement for GIF and can stand in for many common uses of TIFF.

GIF stores bitmapped images with LZW compression and a small palette of indexed colors, and it can pack a short animation into one file. The palette is the limit: a photograph with thousands of colors has to be cut down to fit, so GIF suits simple graphics and brief loops better than continuous-tone images.

SVG files are written in XML and can hold vector shapes, embedded raster images and text, so an icon or logo stays sharp at any size and its code can be read and edited as text. Because SVG is web markup, it also carries functional features for building and managing the picture, not just a static drawing.

WebP was built to make web images smaller, with lossy and lossless modes plus optional animation and alpha; AVIF's twelve-bit color adds high dynamic range and wide color gamut. The cost is compatibility: browsers gained WebP support version by version, so check what your audience's browsers can display and keep a fallback format ready.

TIFF is not one encoding but a tag-based wrapper that can hold raster data with different compression and color schemes, from uncompressed to lossless LZW. The Library of Congress has preferred uncompressed TIFF for master images, and a profile describing the capture device's color can be stored in an extension tag.

PDF represents formatted, page-oriented documents that mix text, images and graphics, built on an imaging model derived from PostScript. For print, the PDF/X standards constrain it for prepress exchange, barring items that do not serve print output, such as scripts and multimedia, and for complete exchange requiring embedded fonts and images and defined trim areas.

EPS wraps PostScript code describing a single graphic, often with a separate preview image so layout programs can display it, and it suits vector art. Adobe has said no further versions will come, the format has no direct support for accessibility features, and conversion to PDF is a common path, though some scientific publishers still request EPS.

Lossless compression lets the original data be rebuilt exactly, bit for bit, and federal digitization guidelines approve lossless schemes such as LZW for every use. Lossy compression gets smaller files by discarding detail that cannot be recovered, so keep the master in lossless form and make each lossy copy from it, not from another lossy copy.

Transparency needs a format that stores it: PNG can carry a per-pixel alpha channel, WebP and AVIF include optional alpha, and later PDF versions added a transparent imaging model. Software matters as much as format, since some older browsers ignored PNG transparency, so check artwork in the place it will be shown.

Bleed is artwork that runs past the trim line so that color still reaches the edge after the sheet is cut. Cutting is not perfectly precise, and GPO's print quality standards tolerate trim deviations of a small fraction of an inch, so art that stops exactly at the trim can leave a sliver of white paper showing.

Trim size is the finished dimension of the piece after cutting, and crop or trim marks printed outside it show where the cuts go. A GPO print order, for example, called for press files with crop marks included, and GPO contract terms make printers check furnished files for bleeds and register marks so the output can be cut correctly.

Cutting and image placement can each drift by small fractions of an inch, and GPO inspectors measure how far printed images land from their specified position. Keep important text and logos inside a margin well clear of the trim line, since anything placed hard against the edge risks being cut or looking crooked.

Imposition is arranging pages on the press sheet so they come out in proper order once the sheet is printed and folded. An imposition error shows up as wrong pagination, which GPO's quality standards class as a critical defect, and the folds themselves can land off their intended line.

Finish changes how much ink a sheet takes: an early printing manual notes that glossy coated paper needs less ink than antique-finish stock, and some faces drawn for soft, unfinished paper look weak on smooth calendered paper. Color shifts too, which is why GSA specifies different inks for its blue on coated and uncoated stock, so proof on the actual production stock.

Proofs are checkpoints before the press run, and each kind tests something different. In one GPO print order the PDF soft proof was checked for text flow, image position and color breaks but not color match, which was judged on hard proofs on certified media or the production stock. GPO asks for corrections on first proofs, since later rounds are for verification.

Contrast ratio divides the relative luminance of the lighter color by that of the darker, each with 0.05 added. It measures luminance, not hue, because color vision differences vary too widely to prescribe safe color pairs, and luminance contrast holds up across them. Compare a computed value to a threshold without rounding it.

WCAG 2.2 sets 4.5 to 1 for body text at Level AA. The figure starts from 3 to 1, an ANSI standard's minimum for normal vision, multiplied by about 1.5, the contrast sensitivity loss tied to 20/40 acuity, which is typical around age 80. Thin or unusual fonts can render fainter than their color values, so a nominal pass can still be hard to read.

At Level AA, large text may drop to 3 to 1 because bigger letters with wider strokes stay readable at lower contrast, which leaves more color choice for titles. The allowance follows real size and weight: a heading that only looks big but is set in a very thin or unusual face may still need the stricter ratio.

Level AAA, the enhanced level, asks for 7 to 1 for normal text and 4.5 to 1 for large text, sized for vision loss around 20/80. Beyond that degree of loss people usually rely on assistive technology with its own contrast and magnification tools, which is why the scale stops there rather than climbing higher.

At Level AA, WCAG 2.2 asks for 3 to 1 against adjacent colors for controls and meaningful graphics: the edge of an input, the state of a checkbox, the parts of a chart a reader must see. Inactive controls are exempt, and a button whose text clearly shows it is a control needs no contrasting border, though its focus indicator still does.

Text counts as large at 18 points regular or 14 points bold, sizes taken from large-print guidelines and roughly 24 and 18.5 CSS pixels. Point sizes chosen in an image editor are unreliable because programs assume different pixel densities, so judge images of text by how big the text actually renders.

Color can carry meaning, but WCAG's Level A rule says it must never be the only visual cue, because some people see it differently or not at all and some displays are monochrome. Pair hue with text, shape or pattern; a difference in lightness also counts as a second cue if the two colors reach 3 to 1 against each other.

Keyboard users need to see which element will receive their next keystroke, so WCAG's Level AA rule asks for a mode of operation in which the focus indicator is visible. Suppressing it without a replacement leaves sighted keyboard users unable to operate the page, and an outline-style indicator usually must meet non-text contrast too.

Text over a photograph must contrast with the parts of the image most like the text and directly behind it, not with the picture's average. When the background varies, darken or fog the area behind the type, or add a halo or outline, so that every letter keeps the required ratio wherever it falls.

WCAG's Level AA rule asks that readers be able to enlarge text substantially without losing content or functions, using the zoom or text-size tools their browser already offers. Your job is not to build a resizer but to avoid layouts that defeat one, such as containers that cut off or overlap text as it grows.

The Level AA rule does not ask you to set generous line, paragraph, letter and word spacing; it asks that content survive when a reader overrides them with larger values. Containers that cannot expand are the usual failure, and text baked into an image or drawn on a canvas cannot adapt at all.

Write alt text for the job an image does on the page. A functional image, such as an icon inside a link or button, should name the action or destination; an informative image should convey the information it carries. When the text alternative is missing, screen readers often announce a file name or URL instead.

An image is decorative when it adds no information, such as a border or spacer, or a photo already described by the text beside it. Give it an empty text alternative so screen readers skip it, since announcing it adds audible clutter. Whether an image is decorative depends on why it is there, so only the author can decide.

Motion that is not essential, such as parallax or animated transitions set off by scrolling, can trigger dizziness, nausea and migraines in people with vestibular disorders. WCAG treats this as a Level AAA criterion: avoid such effects, honor the reduce-motion setting or offer a control that turns them off. Scrolling itself is controlled by the user and is allowed.

Content that flashes at certain rates can trigger seizures in people with photosensitive conditions, so WCAG's Level A rule caps how often anything may flash in a second, with a separate test for saturated red, which people are even more sensitive to. The flashing area is judged against central vision, and a looping clip is analyzed while looping and at its largest size.

Small, crowded targets cause mis-taps, especially for people with tremors or limited dexterity, because a fingertip is larger than a pointer and hides the spot it aims at. WCAG's Level AA minimum accepts an undersized target if enough clear space surrounds it, while the Level AAA enhanced criterion sets a larger fixed size with no spacing exception.

Among mainstream fonts, measured differences in reading are small, and familiar serif and sans serif faces at 12 points read about equally fast. Details matter more: the shape and spacing of characters affect accessibility, wide letter spacing appears to help some low-vision readers, and very thin strokes can render too faint.

Fonts marketed for dyslexia have been tested, and in several controlled studies of children they did not make word or passage reading faster or more accurate than standard fonts; most readers did not prefer them either. Spacing is not simple: one study found wider letter spacing slowed reading unless word spacing grew with it.

Plain language is an accessibility feature: simple sentences, active voice and present tense help people with language impairments, dyslexia or memory difficulties. Layout carries part of the load as well, through key information at the top, consistent headings, lists for scanning and emphasis kept for what truly matters.

Automated checkers quickly flag many potential problems and can guide manual review, but some checks cannot be automated and tools sometimes give false or misleading results. Treat a clean report as a starting point, and pair it with human review and views that show the page as text only or without color.

A wordmark makes the name itself the logo, so the lettering carries all of the identity. In trademark terms the bare words can be registered in standard characters, which protects them in any font, while a distinctive stylized rendering is protected only as drawn, so an owner can register both forms.

A lettermark uses an organization's initials as its mark. Trademark registration can protect the letters themselves in any font, or a stylized monogram only as drawn. Initials can also sit inside a larger device: GSA's Star Mark sets its monogram in a blue shield, and its standards forbid redrawing the parts, separating them or using the monogram alone.

A pictorial mark uses a recognizable image, and its parts can carry meaning: NASA's guidelines say the stars in its insignia stand for space and the orbit for space travel. Because a design can be protected apart from any wording, such an image can be registered on its own in special form, which protects the way it looks.

A mascot gives a brand a character that can carry its personality and build affinity with its audience. In one eye-tracking study of 290 young Chinese adults, animal mascots, compact heads and large eyes drew the most attention and liking, but the authors stress that brand personality and cultural fit should still guide the choice.

A combination mark pairs a symbol with a wordmark in a fixed arrangement; GSA calls its seal-plus-name version a signature and supplies it as one indivisible graphic that is never re-spaced by hand. Standards also say when the parts may appear apart, and a trademark filing covers one variation, so each together or separate version needs its own application.

An emblem sets the name inside the symbol, as in GSA's seal, whose ring of lettering surrounds central imagery and whose standards forbid separating the parts. That suits official use but struggles at small sizes: GSA warns that detail is lost, especially in the lettering, when its seal is greatly reduced, so its simpler Star Mark takes over.

A logo is one mark; a brand is the overall impression an organization makes, shaped by what it does as well as how it communicates. GSA, for example, presents its graphic standards as a way to shape how customers and the public view the agency, with the logo only one tool among many.

An identity system covers every element that carries the brand. GSA's standards, for example, set its marks and their variations, color palettes, typefaces, layout grids, stationery and rules for sub-brands and partners. Defining them together lets many teams produce work that reads as one organization, which a logo used alone cannot guarantee.

Brand voice is how an organization sounds in words, kept consistent across teams the way visual standards keep the look consistent. The VA.gov style guide, for example, is shared so many writers speak with one voice, and its principles of being consistent, conversational, clear and empathetic came from research with the Veterans it serves.

A style guide records the rules for an identity: approved versions of each mark, colors, typefaces, clear space, minimum sizes and examples of misuse. Its purpose is consistency, and it keeps changing; NASA's guidelines, for example, say their list of violations is not comprehensive and is subject to additions.

Clear space is the empty zone around a mark that text and images may not enter, so the mark stays visible and uncrowded. NASA, the Department of Energy and GSA all measure it in units of the mark itself, such as the height of one of its letters or a fraction of the symbol, so the zone scales automatically with the logo.

Minimum size is the smallest reproduction at which a mark still reads; the Department of Energy, for example, sets one in pixels for screens and another in inches for print. Below it detail is lost, and GSA warns the lettering goes first in its seal, so GSA switches to its simpler Star Mark rather than shrinking the seal further.

A favicon is the tiny image a browser shows in the address bar or a tab as a reminder of a site's identity; a 2005 W3C how-to called for 16 by 16 or 32 by 32 pixels. At that size lettering and fine detail are lost first, so build it from the simplest element of the identity rather than a shrunken full logo.

A responsive identity supplies several versions of a mark for different spaces. GSA uses its detailed seal where room allows and its simpler Star Mark wherever the seal would be too small to read, and NASA picks among its insignia versions by production needs and media. Choose by the space and medium available instead of forcing one mark into every context.

Many jobs cannot reproduce full color, such as one-ink printing or foil stamping, so identity systems plan for it: NASA supplies one-color versions of its insignia, and GSA a reversed Star Mark for dark backgrounds. A trademark registered without a color claim can be shown in any color, so the design itself has to carry recognition when color is gone.

Fine detail is the first casualty when a mark is reduced: GSA warns that its seal loses detail, especially in the lettering, which is why it keeps a simpler mark for small uses. Busy backgrounds strain detail too; NASA bars its full-color insignia from backgrounds with clashing colors or similar saturation and supplies one-color versions.

A mark is strongest legally when it is inherently distinctive: invented, arbitrary or suggestive names are easier to protect than names that merely describe the product. Before finalizing a design, a clearance search of federal and state registers and the web helps, since similarity to an existing mark is a common reason for refusal.