Straight quotes are the two generic ver­ti­cal quo­ta­tion marks lo­cated near the re­turn key: the straight sin­gle quote (') and the straight dou­ble quote (").

Curly quotes are the quo­ta­tion marks used in good ty­pog­ra­phy. There are four curly quote char­ac­ters: the open­ing sin­gle quote (‘), the clos­ing sin­gle quote (’), the open­ing dou­ble quote (“), and the clos­ing dou­ble quote (”).

Straight quotes are a type­writer habit. In tra­di­tional print­ing, all quo­ta­tion marks were curly. But type­writer char­ac­ter sets were lim­ited by me­chan­i­cal con­straints and phys­i­cal space. By re­plac­ing the curly open­ing and clos­ing quotes with am­bidex­trous straight quotes, two slots be­came avail­able for other characters.

Word proces­sors are not lim­ited in this way. You can al­ways get curly quotes. Com­pared to straight quotes, curly quotes are more leg­i­ble on the page and match the other char­ac­ters bet­ter. There­fore, straight quotes should never, ever ap­pear in your documents.

For­tu­nately, avoid­ing straight quotes is easy: use your word proces­sor’s smart-quote fea­ture, which will sub­sti­tute curly quotes au­to­mat­i­cally. Smart quotes are typ­i­cally turned on by default.

Smart-quote sub­sti­tu­tion has been built into word proces­sors for nearly 30 years. That’s why straight quotes are one of the most griev­ous and in­ept ty­po­graphic errors.

When you paste or im­port text with straight quotes in it, your word proces­sor may not al­ways con­vert the straight quotes prop­erly. Fix them.

Be­fore you say “that won’t do any­thing”, try it. When your word proces­sor re­places each quo­ta­tion mark, it also per­forms the straight-to-curly conversion.

HTML & CSS have no au­to­matic fa­cil­ity for con­vert­ing straight quotes to curly. But in­sert­ing these char­ac­ters us­ing HTML es­cape codes is dreary.

If you use a CMS like Word­Press, plu­g­ins are avail­able that han­dle this au­to­mat­i­cally. There are also JavaScript-based con­vert­ers that work in the browser. If you’re tempted to write your own straight-to-curly con­verter, re­con­sider—the good ones cover tricky edge cases that you’re apt to miss on your own.

An­other op­tion is to use the lit­tle-known q tag, which au­to­mat­i­cally ap­pends curly quotes to the en­closed el­e­ments. So <q>Hello</q> ren­ders as Hello. Two caveats. First, a par­ent el­e­ment (like html) must have a lang at­tribute (like lang="en") so the q tag knows what kind of curly quotes to use. Sec­ond, this change in markup re­moves the quote marks from the char­ac­ter stream, and doesn’t help with apos­tro­phes, so it may be a long drive for a short day at the beach.