Jump to content

How to apply font ligatures to a text block – help required

Recommended Posts

One of the basic tenets of typography is the application of a ligature to a particular combination of characters in order to achieve a smoother textural effect to an overall body of text. Common ligatures in hot metal type (letterpress) were fi, fl, ffi, ffl etc. The file attached shows the application of a ligature to an f i combination. See how the dot of the i (the tittle) sits clumsily next to the top of the f  whereas the version with the ligatured glyph is much smoother.

Modern digital fonts have multiple ligatures built into the font as individual glyphs and industry standard design software automatically recognizes when a ligature needs to be inserted.

However Squarespace does not automatically substitute ligatures and there appears to be no function in settings to enable you to set this up.

I assume there must be a coding solution to this and if so, how do I apply it as I have no coding experience.

Screen Shot 2023-09-07 at 13.12.27.png

Link to comment
  • Replies 2
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • 1 month later...

Was this solved?

I tried this code. It displayed Lora Serif, and showed ligatures. However, when I changed the font to "karmina-sans", it changed the font to Karmina; however, no ligatures. Karmina Sans does come with ligatures — in particular "fi". When I type in "fi" in Adobe Illustrator, the ligature appears, so I tried copying and pasting the ligature, and voila, a ligature appeared. However, the ligature was not Karmina Sans.

See attached examples of the Karmina Sans ligature at work in other software programs.

p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

Thank you for looking.

Screen Shot 2023-11-05 at 6.05.08 AM.png

Screen Shot 2023-11-05 at 6.05.28 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.