Typography and color on the landing page: what keeps the reading going

The short answer

Typography and color on a landing page decide whether the person reads the offer or only sees a poster. Two font families, a few sizes and one action color are enough for most campaign pages. The rest is contrast, line length and the font showing up before the person gives up. WCAG sets the minimum: ordinary text at 4.5:1, large text at 3:1, an identifiable button at 3:1, and the whole page still works if the text is enlarged or spaced out. The width of 80 characters is a reading ceiling from level AAA, not an automatic penalty. I use that ceiling because an endless line tires the eye, and I let the browser be able to change color and spacing. Below is the scale I build, what color does, and how the web font must not delay the first sentence.

1. Two fonts and a short scale

A landing page does not need the brand's whole family. I pick one font for the heading and the same one, or a second, for the text. The heading goes in a personality family and the body in a neutral one. Three families in the same fold compete, and each extra file is an extra download.

The scale that fits an offer page is short. One heading size, one subheading, one body, one note (deadline, footer, aside). Regular weight in the body. Bold only on what the person needs to find again: the price, the plan name, the word on the button. Bold on everything is bold on nothing.

Italic stays for a foreign term or a product name, not for a whole paragraph. All caps stays on the short label ("new", "class"), not on the long heading. All caps in a long sentence slows reading and, if the text is small, also worsens the perceived contrast.

The page order follows the same scale. The heading says what the offer is. The subheading says who it is for. The body proves it in a few paragraphs. The button repeats the verb of the offer ("request the proposal", "see the class"), not a generic "learn more". If the heading needs three lines on a phone, it is long. I cut the sentence. I do not shrink the type until it becomes body text.

Brand identity, logo and palette come before this page. The article on visual identity before the site explains that order. Here the subject is what the landing page does with the typography and the color that already exist. If the page sells a store product, the product page is the next step, with photo and variant. The landing page does not replace that.

If the project is the whole site or the whole store, e-commerce and the website is where this page joins the set, rather than standing alone.

2. Contrast: the number and the logo exception

Ordinary text, and an image that is text, needs a contrast of at least 4.5:1 with the background. Large text can stay at 3:1. The definition of large text, on the WCAG understanding page, is 18 points, or 14 points in bold. A hero heading usually clears that range. A footer note almost never does. I do not use the looser large-text limit to hide gray in the small print.

There is an exception. Text that is part of the logo or the brand name is outside the requirement. Pure decoration is outside it too. That does not authorize writing the price inside the logo to dodge the contrast. The price is offer text. It falls under 4.5:1.

An interface component, such as the field border and the button, has another number: 3:1 against the adjacent color, under criterion 1.4.11, so the person can identify what is clickable and the state (active, focus, error). A light yellow button on a cream background usually fails even with the word "submit" in bold. I separate the pairs and test each one: text on the background, button text on the button color, field border on the page background.

Color is not the only signal. An error in red alone, with no icon or sentence, disappears for someone who does not distinguish red. The contrast criterion is about luminance, not about "red means error". I write "check the email" next to the color.

Source: WCAG 2.2 and the understanding page for minimum contrast, read on 2026-10-16.

A photo behind the heading is the case that breaks this table most often. The photo changes tone in the middle of the sentence. I put a solid band, or a uniform mask, behind the words. Text straight on sky, a face or a product is illegible in one stretch and legible in another. The mask is part of the design, not a patch.

3. Width, line spacing and what happens if the person enlarges

A very long line makes the person lose the start of the next one. Criterion 1.4.8, level AAA, talks about a width of at most 80 characters (40 in CJK writing), text without justification on both margins, and line spacing of at least one and a half. Note 1 is clear: the page is not required to be born already using those values. The requirement is that a way to change them exists, and the browser can be that way.

I still limit the text column to around that ceiling. On a wide screen, a paragraph from one edge of the window to the other tires the reader. The landing page gains margin. The heading can be wider than the paragraph. The paragraph cannot.

Justifying the block on both margins opens rivers of space in the middle of the line, especially in Portuguese, with long words. I align to the left.

Criterion 1.4.12, this one level AA, does not tell me to publish already with those spaces. It tells the page not to break if the person applies, at the same time, a line height of 1.5 times the font size, spacing after the paragraph of 2 times the font size, letter spacing of 0.12 times the font and word spacing of 0.16 times the font. A button with clipped text, a card that overflows, a menu that overlaps: that fails. I design with room, not with text fitted to the pixel.

Enlarging is also AA. Criterion 1.4.4 requires that text reach 200% without losing content or function, except captions and images of text. And 1.4.10 requires that, at a width equivalent to 320 pixels CSS, the page scroll on one axis only. A text column in a fixed pixel width, with a heading forbidden to wrap, breaks both. I use a unit that grows with the type and I let the heading wrap.

Text inside an image does not enlarge properly. A slogan drawn into the hero art falls outside 1.4.4. I put the real sentence in HTML, on top of or beside the art. The art illustrates. The sentence is read.

If the campaign page looks good in the file and cramped on the phone, send the URL or the file. If it is part of a Shopify store that does not exist yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.

Talk about the project

4. One action color

Landing palette: background, text, one support color and one action color. The action color paints the main button and almost nothing else. If the link, the badge, the testimonial background and the button use the same green, the eye does not know where to click.

The support color is for a band background or a simple chart. It does not compete with the button. If the brand has only one strong color, the button keeps it and the rest stays neutral: black, white, a gray that passes 4.5:1.

The button state changes for real. Hover on desktop darkens or underlines. On a phone there is no hover. The state that matters under the finger is focus and pressed, still at 3:1 against what is around it. A disabled button can fall outside the requirement for an inactive component. I do not leave the main button disabled without saying what is missing ("enter the email").

Shopify uses the same principle at checkout: the help asks for a high-contrast color and a simple page, because the person is filling in delivery and payment. There the heading font and the body font are changed in the editor, from a closed list. On the landing page I have more freedom of font. The discipline is the same. One color owns the click. The rest does not shout.

A link in the middle of the text stays underlined, not only colored. Color alone gets lost. Underline works in black and white too.

5. The font has to show up

A web font that takes too long leaves the first sentence invisible. web.dev records the default behavior: Chrome and Firefox wait up to 3 seconds before showing a fallback font. Safari may hold the text for an indefinite time. Three seconds on a landing page is the person already back at the search results.

font-display changes that. swap shows the fallback right away and swaps when the font arrives. The risk is a layout jump, if the fallback takes another size. optional waits at most 100 ms. If the font has not arrived, the fallback stays, with no late swap. For the landing body, I prefer text visible early. For a highly drawn brand heading, swap still holds, as long as the fallback has a similar width.

The font downloads only if the page uses it. Declaring ten families and applying two is waste, but the files for the other eight do not arrive if no style asks for them. What weighs is each weight the CSS actually calls: regular, bold, italic. I publish the weights the scale uses. Not the catalog.

system-ui on the body uses the device font. There is no download. On a short landing page, when the reading is in a hurry, that is an honest option. The personality stays in the heading, in a single file.

WOFF2 is the format web.dev recommends for a modern font: it compresses about 30% better than WOFF. A Latin font stays in the range of 100 to 1000 glyphs. If the page is in Portuguese, I do not need to embed the set of a writing system the page does not use. Cutting the file down to what the text uses makes the download smaller. The font license has to allow that cut. I check before.

A variable font packs several weights into one file. The file tends to be larger than a single weight. It is worth it when the page really uses several weights. On a landing page with regular and bold, two lean files are usually lighter.

A short example of what I leave in the CSS, with no terminal command:

@font-face {
  font-family: "Your font";
  src: url("/fonts/your-font.woff2") format("woff2");
  font-display: swap;
}

The file path is the one on your page. I do not paste this block into a store theme without seeing what the theme already loads. A theme that already brings the brand font does not need a second copy.

6. What I mark off in the page review

I read the landing page in a low voice, on the phone, from the heading to the button. If I need to bring the device closer to read the note, the body is small. If the button only shows up after three screens of testimonials, the action color arrived late.

I check the four pairs in the table: body, heading, button, field. A photo behind text gets a solid band. The logo can stay as the brand is. The price does not hide in the logo exception.

I enlarge the text in the browser up to double. If a horizontal bar appears, or if the button slips off the screen, 1.4.4 and 1.4.10 were not met. At the narrow width, equivalent to 320 pixels CSS, the page scrolls downward only.

I increase the spacing between lines in the browser. If a card cuts the last line, 1.4.12 failed. The fix is room in the component, not locking the text height.

Last I look at loading. The first sentence cannot stay blank while five weights download. One heading, one body. Google still asks for the same clear title on the phone and on the desktop, and that the main content does not depend on a gesture to exist. An accordion of frequent questions can collapse. The offer heading cannot.

This pass is about the page. It does not replace the identity. A page with the right contrast and a generic font can still have no brand face. The two jobs meet: the brand chooses the color, the landing page obeys the contrast of that color. If the brand color does not pass 4.5:1 in the small print, it stays on the large heading or on the band, and the body goes to a neutral that passes.

Frequently asked questions

What contrast does the landing page need?

Ordinary text, 4.5:1 with the background. Large text, from 18 points or 14 in bold, 3:1. Button and field border, 3:1 against the adjacent color. Text that is the logo stays out. Price, button and paragraph count.

Do I need to limit the line to 80 characters?

The number is in criterion 1.4.8, level AAA, and WCAG itself says the page is not required to already use that value: there only needs to be a way to change it, and the browser serves. I limit it anyway, because a line from edge to edge on a wide screen is hard to follow. I do not use justification on both margins.

Can I use any font from the catalog?

You can, if the license allows use on the web. I publish WOFF2, only the weights the CSS uses, with font-display so the text does not stay invisible. Chrome and Firefox can wait up to 3 seconds in the default behavior. system-ui on the body avoids the download and leaves the personality in the heading.

Does a dark background with white type pass?

It passes if the pair reaches 4.5:1 on ordinary text. Gray on gray is the pair that usually fails, and a color that "looks light" does not replace the measurement. A photo behind white type only works with a stable mask.

Does the same rule apply at the store checkout?

The principle does: high contrast and a simple page. Shopify writes that in the checkout help, and the font there comes from a list in the editor, heading and body. On the landing page the font is yours, with the same limit on contrast and on the button.

Conclusion

Typography and color on a landing page hold the reading when the heading is short, the body fits in a column, the contrast passes in the small print and only one color points to the button. The font shows up early, in WOFF2, without a catalog of weights. Enlarging and spacing the text must not break the page. If your campaign page looks good in the file and illegible on the phone, the path is the e-commerce and website project. Send the page URL or the file. If the page is part of a Shopify store that does not exist yet, talk to me before you create the store: it is born as a development store, is built ready and transferred to your name.

Talk about the project