Curly Quotes vs Straight Quotes: Typography's Most Common Mix-Up

Open any word processor and type a quotation mark. What appears on screen — " or " — depends entirely on whether smart quotes are enabled. This seemingly minor distinction is one of the most consequential decisions in digital typography, and getting it wrong creates problems ranging from ugly text to broken code.

This guide explains every variety of quotation mark, when each is correct, and how to avoid the most expensive mistake in this space: letting a word processor "helpfully" convert straight quotes to curly ones inside code blocks.

All the Quotation Marks, Side by Side

Why Curly Quotes Exist

Typewriters had one key for quotation marks. It produced " — a vertical stroke, identical for opening and closing. This was a mechanical limitation, not a typographic ideal.

Metal type — and every printed book before the typewriter era — used distinct opening and closing quotation marks. Opening marks curl toward the text they open; closing marks curl away. This directional distinction gives the eye a clear visual signal about where quoted material begins and ends.

Digital typography restored this convention with Unicode code points specifically assigned to opening and closing variants. The term "smart quotes" or "curly quotes" refers to these directionally correct characters. Word processors automatically substitute them through a feature typically called "smart quotes" or "typographer's quotes."

When to Use Curly Quotes

Prose and Long-Form Content

Any running text — articles, books, marketing copy, documentation written for humans — should use curly quotes. They are the correct typographic form for natural language.

She said, "The deadline is tomorrow," then closed her laptop.
It's a well-known rule: don't confuse ' and '.

HTML Body Text

When writing HTML content intended for human reading, curly quotes are typographically superior. They are fully valid in UTF-8 encoded HTML documents, which is the universal standard.

<p>She replied, &#8220;The specification was clear.&#8221;</p>
<!-- or using actual characters if your file is UTF-8 -->
<p>She replied, "The specification was clear."</p>

CSS content Property

When generating quoted text via CSS pseudo-elements, use Unicode escapes or the actual characters:

/* Standard English curly quotes */
blockquote::before { content: "\201C"; }
blockquote::after  { content: "\201D"; }

/* Or use the CSS quotes property for multi-language support */
:root {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote {
  quotes: auto;
}

blockquote::before { content: open-quote; }
blockquote::after  { content: close-quote; }

When to Use Straight Quotes

All Code

This is the non-negotiable rule: straight quotes only in code. In every programming language, configuration file, shell script, and command-line context, the quotation mark character is " (U+0022) or ' (U+0027). Using a curly quote in code will cause a syntax error.

# Correct
print("Hello, world")
name = 'Alice'

# Broken — curly quotes cause SyntaxError
print("Hello, world")   # U+201C and U+201D — will NOT parse
name = 'Alice'           # U+2018 — will NOT parse

// Correct
const greeting = "Hello";
const name = 'world';

// Broken
const greeting = "Hello";  // syntax error

This is why the most dangerous scenario is copying code from a word processor or rich-text CMS that has smart quotes enabled. The code looks visually correct on screen but will fail to run.

URLs and Attribute Values

HTML attribute values technically accept curly quotes in UTF-8 HTML5, but universal convention uses straight quotes. Every HTML parser, code formatter, and validator expects straight quotes in attribute positions.

<!-- Correct -->
<a href="https://example.com" class="link">Click</a>

<!-- Valid but universally avoided -->
<a href="https://example.com" class="link">Click</a>

Data Formats

JSON, YAML, TOML, CSV, and virtually every structured data format uses straight double quotes as structural delimiters. Never use curly quotes in data files.

{
  "name": "Alice",
  "city": "New York"
}

The Auto-Conversion Problem

Word Processors and CMS Editors

Microsoft Word, Google Docs, Apple Pages — all convert straight quotes to curly quotes automatically. This is correct behavior for prose. The problem arises when:

1. A developer copies code from a specification document or email written in Word
2. A content editor pastes code samples into a rich-text CMS block
3. A blog platform's WYSIWYG editor converts quotes in fenced code blocks

The failure mode is subtle: the code looks right visually at the font sizes used in documents, but the underlying character is wrong.

Defense strategy for code in documents: - Format code samples as monospace or code style — most word processors disable smart quotes in code-formatted text - In Word: File → Options → Proofing → AutoCorrect Options → uncheck "Straight quotes with smart quotes" for code blocks - In Google Docs: Tools → Preferences → uncheck "Use smart quotes"

Rich-Text CMS Platforms

WordPress, Contentful, and similar platforms often apply smart quotes globally. For technical content, this requires either:

• Using dedicated code blocks (which bypass smart quote conversion)
• Storing code samples as raw HTML with the <code> or <pre> tag, which prevents further processing
• Using a markdown-based authoring flow where code fences are protected

Programmatic Detection

When processing user-submitted content or imported documents, you may need to detect and selectively convert quotation marks. Use our Character Analyzer to inspect any text and identify the exact code point of each quotation character.

In JavaScript:

const STRAIGHT_DOUBLE = '\u0022';
const STRAIGHT_SINGLE = '\u0027';
const LEFT_DOUBLE  = '\u201C';
const RIGHT_DOUBLE = '\u201D';
const LEFT_SINGLE  = '\u2018';
const RIGHT_SINGLE = '\u2019';

// Convert curly to straight (for code sanitization)
function straighten(str) {
  return str
    .replace(/[\u201C\u201D]/g, '"')
    .replace(/[\u2018\u2019]/g, "'");
}

// Convert straight to curly (for prose typesetting)
function smartify(str) {
  return str
    .replace(/(^|[\s(])"(?=\S)/g, '$1\u201C')  // opening double
    .replace(/"/g, '\u201D')                     // closing double
    .replace(/(^|[\s(])'(?=\S)/g, '$1\u2018')  // opening single
    .replace(/'/g, '\u2019');                    // closing single / apostrophe
}

Note: the smartify function above is a simplified example. Production-grade smart quote conversion is surprisingly complex — apostrophes in contractions (it's, don't) use the closing single quotation mark (U+2019), which is identical to the right single quotation mark. Context-sensitive rules are required.

Apostrophes: The Special Case

The apostrophe in contractions and possessives (it's, Alice's) is typographically the right single quotation mark (U+2019), not U+0027. However, in code, ' always means U+0027.

This creates an interesting ambiguity: when you see it's in HTML body text, it should ideally be it’s or it's (using U+2019). Most readers will never notice the difference visually, but search engines, screen readers, and text processing tools may handle them differently.

In practice, using the actual curly apostrophe in HTML body text is best practice for polished publishing. Ensure your CMS or templating layer handles this correctly.

International Quotation Conventions

Different languages use different quotation mark characters:

When building multilingual websites, the CSS quotes property combined with the lang attribute lets you specify language-appropriate marks:

:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(de) { quotes: "\201E" "\201C" "\201A" "\2018"; }
:lang(fr) { quotes: "\AB\A0" "\A0\BB" "\2039\A0" "\A0\203A"; }

Common Mistakes and How to Fix Them

Mistake 1: Copying code from documentation into an IDE through Word

Use a plain text editor (or dedicated code snippets) as an intermediary. Or paste into the browser URL bar first to strip formatting.

Mistake 2: Using " in prose

" renders as the straight double quote. In body text where you want curly quotes, use “ and ” instead.

Mistake 3: Straight apostrophes in published text

The difference between it's and it's is invisible at most reading sizes, but the latter is technically incorrect typography. Most CMS platforms handle this automatically; if yours doesn't, a pre-save processing hook can normalize apostrophes.

Mistake 4: Not escaping quotes in HTML attributes

Inside HTML attribute values delimited by double quotes, use " or " for a literal double quote. Using a curly quote instead (") is technically valid but breaks the visual consistency of code.

Next in Series: The ellipsis character vs three period characters — they look identical on screen, but behave very differently in CSS text-overflow and copy-paste scenarios. See Ellipsis vs Three Dots.