WCSS: AS Circular ligatures active in global styling

[tombauer85]

Per AS brand guidelines (pg. 13), ligatures should not be active for the AS Circular font on AS.com.

Steps to reproduce the behavior:

1. Go to AS.com
2. View the CTA "Find flight deals now"
3. Observe that the ligature is active and most commonly occurs with the letter combination f + l.

Expected behavior:
No ligatures active for digital experiences on AS.com and MOW.

Screenshots

Desktop:

• Browser: All browsers

Smartphone:

• MOW: All devices

[blackfalcon]

@tombauer85 thanks for submitting this issue, but I am afraid I have no real resource to correct this. This issue has to do with the font library and the Auro team has no control over that.

When using WCSS, the code for the web font is here https://github.com/AlaskaAirlines/WebCoreStyleSheets/blob/master/src/_fonts.scss. That being said, what individual teams are doing is not in our control.

That being said, if you look at the page you are referencing, using the inspector you can add letter-spacing: 0.1px and that ligature is dropped. We could add that to WCSS as a default, but that is not our decision, that needs to come from design. Not to mention, it feels a little hackie.

[blackfalcon]

With letter-spacing: 0.1px set at the page level. All type is affected by this.

[tombauer85]

@blackfalcon interesting, so we can't apply this code to the global styling?

font-variant-ligatures: no-common-ligatures;

When I add this to the CSS under "body, html" it seems to render all text without ligatures.

[blackfalcon]

Yeah, font-variant-ligatures would do the work and is not as hacky. Yeah, we do that 100!

[tombauer85]

Great, thanks! @blackfalcon

[tombauer85]

Hi @blackfalcon, just wanted to check in on this. It doesn't look like the ligature issue was ever fixed on the homepage. Was this added to the global styling? Could you please let me know if there is any action on the content production end to finally fix this issue?

[blackfalcon]

Hey @tombauer85 this update was released with v3.4.0. Can you confirm with the team as to what version of WCSS they are using?

This was added to the essentials file, so please verify if that resource is being used.

[tombauer85]

Talked to Steven and Marnel about this, Content Enablement is working on getting the latest WCSS imported globally either this sprint or next. Thanks for your help!