Copywriting: Graphic Writing Techniques
Free Business Courses » Copywriting Course » Free Lesson
Here is a practical checklist showing the widely recognized rules for the visual design and formatting of professional copywriting.
These principles are consistent with established university guidance on digital typography and readability, including recommendations on line length, spacing, alignment, font size, capitalization, and typographic hierarchy. (source: "Enhance Typography for Legibility," Harvard University).
These are also the same principles I use when writing my blog posts, so you can use the structure and presentation of these lessons as a reference.
Background and Text Colors
Use only three colors: black, white, and blue:
- White background.
- Black text.
- Blue accent color, preferably a dark, highly legible blue such as #005FCC, reserved for CTAs, links, and a very small number of strategic elements.
Text Width
The text should never stretch across the entire width of the screen.
On desktop, a text column roughly 600-750 px wide is generally highly readable, although thinking in terms of approximately 50-75 characters per line is even better because character-based measurements adapt more naturally to typography and font size.
Alignment
Body copy should be left-aligned.
Avoid:
- Justified text.
- Long centered paragraphs.
- Randomly switching between centered and left-aligned text.
Centered text, on the other hand, can work extremely well for headlines, subheadlines, CTAs, and short isolated elements.
Typographic Hierarchy
The distinction between the different levels of information must be immediately obvious:
- H1: Main headline.
- H2: Section heading.
- H3: Subsection heading, when necessary.
- Body copy.
- CTA.
Do not rely exclusively on bold text to create hierarchy.
Use differences in size, spacing, and position as your primary tools for establishing visual importance.
Main Headline
The main headline must have the greatest visual weight of any textual element on the page.
That means:
- Significantly larger font.
- Plenty of surrounding space.
- Very few lines.
- Dominant positioning.
- No nearby elements competing with it visually.
As a general reference for desktop websites, an H1 can easily be 30-32 px or larger depending on the design.
Section Headings
Every major conceptual block should also be visually recognizable.
An ideal structure looks like this:
- Section heading.
- Paragraph.
- Paragraph.
- Optional list.
- New section heading.
- Paragraph.
This way, even when readers scroll quickly through the page, they can immediately understand its structure and identify the subject of each section.
Short Sections
Each section should generally stay below approximately 150-200 words.
One of the most anxiety-inducing things in copywriting is looking at an enormous wall of text and immediately thinking about how much you are going to have to read...
Breaking the copy into compact sections makes the page feel substantially easier to approach.
Line Breaks
After every period and question mark, start a new line and leave a blank line.
It makes the text look much cleaner and prevents paragraphs from becoming visually oppressive.
White Space and Blank Lines
White space is fundamental.
Leave a blank line:
- Between paragraphs.
- Before headings.
- After headings.
- Between major sections.
- Around CTAs.
- Around testimonials or content boxes.
- Around the margins of the page.
As a general rule, it is better to give the page slightly too much breathing room than too little.
Line Spacing
Never compress the text too tightly.
For body copy, a useful reference point is a line-height of approximately 1.4-1.7.
The lessons you are reading use a line-height of 1.4.
Body Copy Size
For the web, 16 px should effectively be treated as the minimum.
You should never force readers to move closer to the screen just to read your copy comfortably.
Bold
I would never use bold.
You risk attracting attention to something that does not deserve it.
It adds nothing essential to the page, and it is the kind of device you see constantly in gossip magazines.
We are serious entrepreneurs, so we do not need cheap tricks to attract attention.
Italics
Use italics only when there is a legitimate editorial reason for doing so, particularly for certain foreign words and the titles of complete or long works, in accordance with American editorial conventions. (source: "Common Language Errors," Harvard Law School).
That includes complete works such as books, movies, magazines, newspapers, albums, podcasts, and series.
Underlining
Avoid underlining completely because, on the web, it automatically communicates that the text is a link.
Save underlining for links.
If someone sees an underlined word, tries to click it, and nothing happens, that person is going to assume there is something wrong with the page.
All Caps
On the web, writing in all caps is commonly interpreted as shouting.
Since it adds nothing useful to our copy, I would always avoid it.
Bullet Points
AI uses bullet points recklessly, so you have to use them sparingly or your copy starts looking like it was written by AI.
Use them only when they genuinely make structured information easier to understand, particularly for:
- Features and their corresponding benefits.
- What is included.
- Procedures.
- Results.
- Requirements.
Do not turn everything into a list, or readers will smell AI all over the page.
Call to Action (CTA)
The CTA must be visually dominant, although it does not necessarily have to be exactly as large as the main headline.
A strong CTA needs:
- Plenty of surrounding space.
- Strong contrast.
- Clearly noticeable size.
- An unmistakable button treatment when clickable.
- Very little text.
- No competing element immediately beside it.
In long-form copy, you do not necessarily have to wait until the end before introducing the CTA.
You can repeat it at strategic intervals throughout the text as long as you are not dropping one every two lines.
A practical fixed rule is to place a CTA approximately every 20% of the total word count, which divides a long piece of copy into five major reading stages without making the CTA feel relentlessly repetitive.
For example, in a 5,000-word piece of copy, the recurring CTA points would fall approximately every 1,000 words, while the final CTA can appear naturally at or near the end.
To calculate the length of your text, use Free Sentence Counter by Grammarly.
Quotes and Testimonials
Quotes and testimonials should be immediately distinguishable from the author's own copy.
You can use:
- Large quotation marks.
- A slightly different font treatment.
- A subtly different background.
- Indentation.
- A photograph.
- The person's name and title underneath.
They also create an excellent visual change of pace within long-form copy.
Images
Go very easy on images.
Do not insert an image simply because somebody told you that you "need an image every X paragraphs."
That is not true.
Every image must have a purpose.
Use images only when they show something genuinely useful, such as:
- Product.
- Chart.
- Demonstration.
- Before and after.
- Result.
- Person being quoted.
A useless decorative image interrupts the flow of the copy.
When you use informative images, captions have a strong chance of being read because the reader's eye is naturally drawn to the image first and then to the text directly associated with it.
Use a smaller font size for captions than for normal body copy, but keep the text black on white.
Font
Use one font family throughout the copy.
Write everything in that typeface, from headings to CTAs, and create hierarchy primarily by changing the size and positioning rather than constantly switching typefaces.
Strong choices for readable web typography include:
- Arial
- Helvetica
- Verdana
- Tahoma
- Roboto
- Open Sans
- Segoe UI (the font you're reading)
- Georgia
- Calibri
These fonts are not inherently "better for SEO" in the sense that choosing one will directly improve rankings.
Their advantage is readability and - in the case of system fonts - potentially lower loading overhead, all of which can contribute to a better web experience.
No Gratuitous "Effects"
For professional copy, avoid gratuitous visual effects like the plague:
- Shadows.
- Gradients.
- Colors other than black, white, and the accent color.
- Highlighting.
- Emojis.
- Borders.
- Icons.
- Animations.
- Decorative body fonts.
Copy that communicates authority is usually visually restrained because clean typography and generous spacing make information easier to read, while highly stylized typography tends to reduce legibility and should therefore be used sparingly. (source: "Enhance Typography for Legibility," Harvard University).
Mobile
This is now a fundamental rule: you have to check your copy on a smartphone before publishing it.
On mobile:
- Paragraphs that look short on desktop become long.
- Oversized headlines can consume the entire screen.
- Content boxes can become enormous.
- Multiple columns often stop working effectively.
- Small CTAs become difficult to tap.
Desktop and mobile therefore require different visual proportions and hierarchy, and both versions have to be checked before publication.
