>_Building AppsWithout Code
Look & feel / DETAILED TASK GUIDE

Update the site typography

Typography works best as a small system: a readable body size, a consistent font family, and deliberate heading sizes. Change the shared styles rather than fixing individual paragraphs one at a time.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026DIRECT TOOL + AI PROMPT

Before you start

  • An existing stylesheet or theme file.
  • For the direct tool: a global CSS file and Node.js.
  • A font already available to the browser; a family name alone does not download a custom font.

How to do it

  1. Find the current body and heading rules. Note any framework typography tokens.
  2. Choose a system stack for an immediate result, or ask the AI assistant to reuse an already installed font.
  3. Use the direct tool for a focused font-family override, or the AI prompt for a coordinated type scale.
  4. Inspect a long heading, a form label, and a dense paragraph at phone and desktop widths.

Before & after

ILLUSTRATIVE EXAMPLE
body { font-family: system-ui, sans-serif; }

Body text uses the system sans-serif stack. The direct version changes the font family, while the broader AI task can adjust size and spacing too.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check long headings, readable line lengths, and small screens.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

The requested font looks different

A font name is not a font file. Verify the resource is loaded or choose a system stack.

Buttons still use another font

Form controls may have separate styles. Check their computed font before changing the shared component.

Undo the change

Restore the modified typography tokens or remove the labelled direct override. Keep any unrelated layout changes.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. The direct tool uses our shared local-edit engine; native Windows execution remains unverified.

MDN: font-family ↗ · Our review approach