Web Typography - Creating Curly Quotes in HTML

Use-Cases of this Tutorial

  • You are looking to know how create curly quotes in a HTML page.

It is generally recommended in web typography to use curly quotes instead of the normal "straight quotes", as the former looks better. Straight quotes are generated by typewriters, but a webpage should obviously look better.

In HTML we can create curly quotes around a given text using the Inline Quotation element, represented by the <q> tag.

Left & right, single & double curly quotes can also be created using HTML entity symbols.

Demo

Curly quotes look better than "straight quotes"
<div><q>Curly quotes</q> look better than "straight quotes"</div>

Creating Opening Single Curly Quote

A single opening curly quote can be created with the HTML entity &#8216;

Creating Closing Single Curly Quote

A single closing curly quote can be created with the entity &#8217;

Creating Opening Double Curly Quotes

Double closing curly quotes can be created with the entity &#8220;

Creating Closing Double Curly Quotes

Double closing curly quotes can be created with the entity &#8221;