The Typography Mistake You’re Probably Making in Webflow (And How to Fix It)

When working on website designs, small details often make the biggest difference. One subtle yet common mistake—especially among more junior designers or Webflow developers who haven’t been formally trained in design—is using inch marks instead of proper quotation marks. Once you know about this, you won’t be able to unsee it!

The Problem: Inch Marks vs. Quotation Marks

During my time at university, one lesson stuck with me: never underestimate the power of proper typography. My tutor was always adamant about using the correct quotation marks, and honestly, they were right. Inch marks (″) are meant for measurements like inches or seconds, not for quoting text. When you use them in place of quotation marks, especially with detailed fonts, you’re wasting the effort type designers put into their work.

This is a common mistake for junior designers or Webflow developers who may not have had formal typography training. It’s subtle but noticeable, and correcting it can elevate your design instantly.

The Solution: Use HTML Entities for Proper Quotes

If you're coding manually, the best way to ensure you're using proper quotation marks is with HTML entities:

• Opening double quote: “ ( “ )
• Closing double quote: ” ( ” )

You can find a comprehensive list of HTML entities at Toptal’s HTML Entities Guide, a great resource to have bookmarked.

Making It Easier with Webflow

For Webflow users, this process can be simplified. Instead of manually searching for and copying the correct characters, you can use the Flow Guys Tool Kit for Webflow. This tool kit includes our Designer Extension, which features a variety of helpful tools, including the ability to easily insert the correct quotation marks (and other special characters) directly into your design. No more hunting for HTML entities online—you can do it all within Webflow itself. Find out more about our Tool Kit on the Webflow website.

Example: Fixing Testimonials

Let’s take a quick example:

Incorrect Testimonial:
'John Doe said, "This service was amazing!"'

Now, let’s replace those inch marks with proper quotation marks using the Flow Guys Tool Kit:

Corrected Testimonial:
John Doe said, “This service was amazing!”

It’s a small adjustment, but it elevates the quality of your design, ensuring the typography matches the professionalism of your content.

Wrap-Up

In design, details matter. Whether you're hand-coding or working in Webflow, using proper quotation marks can make a significant difference in how polished your design looks. And now that you know about this small, but impactful change, you won’t be able to ignore it!

For an easier way to handle these details in Webflow, check out our Flow Guys Tool Kit, which includes the Designer Extension and other useful tools. Stay tuned for more design insights, and feel free to reach out if you have any questions.