A web accessibility win following Supreme Court decision

:bulb: Tip of the Week

supported by

Defining quotation styles with the <q> tag

When styling your site you may be happy with the "default, straight quotation style", but if you're keen on getting your typography just right then there is a way to ensure your quotation marks are “smart” via CSS.

Asexplained here, the HTML <q> element signals that the contained text is a short inline quotation. Most browsers implement this by surrounding the text in "quotation marks". You can, however, add a style to modify what automatically appears around the text:

q {

quotes: "“" "”";


It may be hard to make out in email, but this rule will wrap your inline quote with alternative 'smart' quotation marks. This blog post expands on how this simple tip can be used for multilingual sites, such as using differing quotation rules for different languages (like German).

Another idea is outlined in this recent blog post from Michael Lazarski , who shows how this technique can even be used with emoji for an :raised_hands: altogether different :raised_hands: approach.

This Tip of the Week is sponsored byFlatiron School, where you can learnsoftware engineering,data science, orUX/UI design in just 15 weeks online or on campus.