Blog» Fixing opacity problems on fonts with overlapping glyphs

Fixing opacity problems on fonts with overlapping glyphs

By Benjamin Kroll  | September 12, 2019  |  Front-end development, Web solutions

Certain fonts feature glyphs that intentionally overlap.

This largely applies to "brush" or "script" type fonts where the overlap is intentional to achieve the effect of connected letters. Using a web font like that becomes a problem as soon as you try to apply opacity to text using the font.

In our example we'll look at the font Moonstone, a "handwritten brush font".

Applying opacity either via a CSS rbga() colour value or an opacity declaration on the content's parent element does not work as expected.

The problem

The browser applies opacity to each glyph individually.

The opacity for overlapping parts ends up with double the intended value.

semi transparent brush font showing glyph overlap
<h5 class="card-title"><span class="faded">Escapade</span>Camping car</h5>
 
.faded {
    font-family: "Moonstone-Regular";
    position: absolute;
    top: -.9em;
    font-size: 1.8em;
    opacity: .2;
    left: 50%;
    transform: rotate(-10deg) translateX(-50%);
    font-style: normal;
}

A solution

To solve the issue, an additional wrapper element is needed to which the opacity is applied. This will trigger the browser to render the child element opacity as expected.

The font face declaration has to remain on the child element of the wrapper for this to work.

semi transparent brush font showing without glyph overlap issues
<h5 class="card-title"><span class="faded"><em>Escapade</em></span>Camping car</h5>
 
.faded {
    opacity: .2;
}
.faded em {
    font-family: "Moonstone-Regular";
    position: absolute;
    top: -.9em;
    font-size: 1.8em;
    left: 50%;
    transform: rotate(-10deg) translateX(-50%);
    font-style: normal;
}

Join our mailing list for news, events, tips, and tools

Related Blog Posts

How to customize Bootstrap 4 using Sass

Some months ago I listed 7 reasons why you should be using Sass over conventional CSS to build stunning websites. One of these reasons is the ability...

Read more »

7 benefits of using SASS over conventional CSS

Writing CSS (Cascading Style Sheets) is critical to effectively describe how HTML elements must be displayed on a web page to define styles, design,...

Read more »

Editing CSS/JS in Google Chrome

How many times have you found yourself editing and tuning up CSS or JavaScript code right in the browser, then refreshing the page only to lose all of...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2019 Mugo Web. All rights reserved.