3 Steps to Remove Font Ligatures from Sketch | Instructions

Sketch makes it easy

1. Highlight Select text to be modified
2. Navigate to Menu > Text > Ligature…
3. Select ‘Use None’ from the options

Follow these simple 3 Step instructions to remove font ligatures from Sketch. Fonts are great. Some have specific design ligatures that do not fit a brand.

Roboto font for example combines an ‘f’ and ‘i’ like this:

Sketch screenshot showing Roboto font ‘f’ and ‘i’ combined

When we want this:

Sketch screenshot showing removed ligature from Roboto font combined ‘f’ and ‘i’

Sketch makes it easy

1. Highlight Select text to be modified
2. Navigate to Menu > Text > Ligature…
3. Select ‘Use None’ from the options

Screenshot Sketch Text Ligature Setting — Before

Screenshot Sketch Text Ligature Setting — After

CSS VERSION

There is also a way to handle this in CSS. See font-variant-ligatures: none; on caniuse.com.

font-family: 'Roboto', sans;
font-variant-ligatures: none;

If you found this helpful, like > follow > share > comment.

CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.