Removing font ligatures

#webflow
#insights
Removing font ligatures

In typography, Ligature binds two or more characters into one, which sometimes looks like an issue. Some Web browsers like Safari browser on both Mac OS X and iOS show standard ligatures by default.

The most popular example of font ligatures is a combination of the following letters: fi, fl, ff, ffi, and ffl.

If you have expanded or collapsed tracking (CSS: Letter-spacing) in the font you use, you will see that some letters are defined as one symbol:

I bet you’ll want to disable Ligatures—use the following custom CSS code for the entire website or just for a specific selector by a class name:

[code https://github.com/dumkaio/blog/blob/master/removing_font_ligatures/style.css]

Check the live web example I’ve made in Webflow to see the difference.

Learn more about ligatures issues described by Jason Tselentis, Associate Professor at Winthrop University’s Department of Design.

It might be interesting for you

Let’s create together

Start a project

Let’s create together

What are your interested in?

Budget

Timeframe

Personal details

Thank you for getting in touch!
We appreciate you contacting us.
We will get back to you shortly.
Dumka
Oops! Something went wrong while submitting the form.
Close