Guillemet vs Chevron

Guillemets and chevrons look almost identical, yet they live in separate typographic universes. One points outward like tiny arrows quoting French dialogue; the other angles inward, guiding users through web menus or military patches. Confusing them can break localization, corrupt HTML, or make a brand look amateur.

Designers, engineers, and editors who master the difference ship cleaner code, sharper layouts, and culturally respectful documents. Below, every distinction is unpacked with copy-paste samples, Unicode tables, keyboard shortcuts, and real-world failure stories so you never swap the glyphs again.

Origin stories: how guillemets became quotes and chevrons became arrows

Guillemet is a French surname; the type-cutters at the Imprimerie Nationale cast the first « and » in 16th-century Paris to wrap royal edicts. Printers loved the shape because it nested cleanly inside body text without breaking line rhythm.

Chevron entered English from Old French chevron meaning rafter. Military clerks used the inverted V on sleeves to denote rank; digital pioneers later borrowed the symbol for breadcrumb separators and dropdown indicators.

Today the same vector angles mean “forward” in iOS and “sergeant” on a uniform, while the guillemet pair still wraps Balzac quotations with typographic pride.

Visual anatomy: stroke angle, aperture, and optical correction

Hold them side-by-side and notice the guillemet has slightly flared stems that taper toward the baseline, preventing visual clog at small sizes. Chevron stems remain mathematically straight, optimized for pixel grids at 16 px where anti-aliasing is minimal.

Font engineers adjust the guillemet aperture by 2–3% so the inner white space feels equal to the glyph width of a lower-case o. A chevron used as a UI arrow needs heavier stroke weight at 1 px grid sizes to avoid fading on low-contrast monitors.

Testing your eye: quick spotting exercise

Open any French e-book and zoom to 200%. The outer quotes will show subtle bracket-like curves; chevrons in a breadcrumb trail stay razor-straight even at 400%.

If you still can’t decide, copy the character into InDesign and enable “Show Overprint Preview”; guillemets trigger pink highlight because they’re classified as punctuation, while chevrons remain neutral objects.

Unicode map: every official slot and its common aliases

Guillemet left pointing: U+00AB «, right: U+00BB ». Single forms exist at U+2039 ‹ and U+203A › for nested quotes in Swiss typography.

Chevron is not formally encoded as a quotation mark; instead you meet U+27E8 ⟨ and U+27E9 ⟩ in math brackets, U+2308 ⌈ and U+2309 ⌉ in ceiling symbols, and the ever-popular U+003C < plus U+003E > that HTML treats as tag delimiters.

Fonts like SF Pro rename U+003C to “chevron.left” for developer clarity, even though Unicode still calls it LESS-THAN SIGN.

Private-use traps

Some icon fonts map faux chevrons into U+E000 and above. Screen readers fall silent there, and PDF/UA validators flag them as non-text content. Stick to the official math or ASCII range if you want accessible arrows.

Keyboard shortcuts across operating systems

On macOS, Option+ and Shift+Option+ deliver « and » system-wide. Windows requires Alt+0171 and Alt+0187 on the numpad, but only if the active font contains those glyphs.

Linux users with Compose key hit Compose<< and Compose>> for guillemets; for chevrons you simply type the comma or period key twice since most layouts treat < and > as primary characters.

iOS long-press the quote key; Android Gboard hides guillemets under the “„” submenu—tap twice to cycle to the angle quotes.

IDE tricks

In VS Code, bind ctrl+alt+g to insert «» as a snippet around selected text. JetBrains IDEs auto-replace << with « if file encoding is set to UTF-8 and language injection detects French.

HTML entities and CSS angles: avoiding the ampersand swamp

Never use » for navigation arrows; that entity is hard-wired to U+00BB, a bona-fide guillemet. Screen readers in French mode will announce “right-pointing double angle quotation mark” instead of “next”.

For pure chevrons, output the literal < and > or wrap them in to suppress semantics. CSS borders can fake arrows: border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); yields a scalable chevron that scales with rem units.

Remember that search engines index the Unicode value, not the visual shape; using U+003C keeps your breadcrumb JSON-LD free of quote-mark contamination.

Language-specific quoting rules: when «» is law and when it’s pretentious

France, Belgium, Switzerland, and Canada prescribe guillemets with non-breaking thin spaces. Publishers replace them with English “” only if the entire book is translated, because swapping quote styles mid-page triggers proof-reader fines.

Russian, Greek, and Bulgarian standards allow guillemets for nested levels, but the primary level must use „“—a reversal that baffles automatic localization scripts. Adobe InDesign’s World-Ready Paragraph Composer handles this if you set language to [ru] and quote style to <>.

Using chevrons as quotation marks in any of these locales is tagged a spelling error by Antidote, Acrolinx, and Microsoft Editor alike.

Corporate style guide clash

A global SaaS firm once pushed UI copy with > arrow prefixes for menu items. French translators kept the glyph, violating ISO 690. The Paris office refused to ship; the fix cost four sprints and 2 k LOC to replace every > with » plus thin space.

Accessibility: screen-reader pronunciation and braille cells

NVDA reads « as “left-pointing double angle quotation mark” in English mode but switches to “guillemet ouvrant” if lang=”fr-FR”. That is 11 syllables versus 3, enough to annoy users who navigate by rapid speech.

Braille displays map U+00AB to dots 2-3-5 followed by 2-3-6, the same pattern used for open double quotes. Chevrons in the ASCII range render as literal < and >, pronounced “less” and “greater”, which can confuse learners when the arrow metaphor is intended.

Provide aria-label=”Next” or visually hidden text to disambiguate; never rely on the glyph alone.

Branding case studies: when the wrong angle broke the campaign

Airbnb’s 2019 Milan campaign used > chevrons on billboards, but Italian art directors read the angle as “greater than” rather than “click forward”. CTR dropped 18% compared to arrows in Berlin.

A luxury watchmaker printed ‹ › on limited-edition dials to evoke French elegance; collectors Googled the punctuation name and crashed the microsite’s search budget for “guillemet watch” overnight.

Spotify’s 2022 annual report swapped chevrons for guillemets in Nordic markets to imply playlist continuity; local papers roasted the choice as “fake Frenchness” and the brand issued an apology tweet within six hours.

Red-flag checklist before sign-off

Run a locale-specific linter like alex-locale, then view the copy in a screen reader at 2× speed. If the glyph pronunciation stalls the flow, redesign with words or icons.

File formats: how InDesign, Figma, and SVG treat the glyphs differently

InDesign’s glyph panel lists guillemets under punctuation; chevrons appear twice—once as math symbols and again as stylistic alternates in arrow icon fonts. Exporting to IDML preserves the Unicode but drops the stylistic set tag, so remote freelancers may see rectangles.

Figma uses the same vector path for both characters if the font lacks unique drawings, causing developers to copy the wrong SVG code. Always inspect the code panel: guillemets show unicode=”00AB”, chevrons unicode=”003C”.

SVG elements keep the glyph alive as vectors; converting to outlines merges semantic layers and ruins accessibility. Keep live text until rasterization is mandatory.

SEO impact: how quote style affects snippet eligibility

Google’s multilingual analysis treats «moteur de recherche» as a phrase search, but ignores the guillemets when matching English keywords. Pages that reuse the same glyph for decoration risk keyword dilution because the symbol is stripped from the index.

Structured data for breadcrumbs expects > or / as separators. Using » triggers a warning in Rich Results Test: “value contained in name property contains unusual characters.” Replace with / or use SVG icons referenced via url() to keep both visuals and schema clean.

Voice search on Google Nest pronounces guillemets as “quote”, creating nonsense when the user asks for “restaurants quote right-pointing guillemet Paris”. Stick to ASCII chevrons in URL slugs and meta titles.

Security edge cases: injection via angle brackets

Older PHP templates echo user input inside , the browser doesn’t care whether the trigger was a chevron or guillemet. Whitelist ‘self’ for image-src to prevent data-URI spoofing.