Kevin Powell - Community•4mo ago

stroke text

Hi guys, I want to create some text like the picture but when I use text-stroke the text is broken. Is there any way to fix it?

p{
  font-family: "Inter", sans-serif;
  font-size: 70px;
  -webkit-text-stroke: 4px navy;
  font-weight: 700; 
  color:transparent; 
/*   letter-spacing: 2px; */
}

p{
  font-family: "Inter", sans-serif;
  font-size: 70px;
  -webkit-text-stroke: 4px navy;
  font-weight: 700; 
  color:transparent; 
/*   letter-spacing: 2px; */
}

8 Replies

Mannix•4mo ago

this seems to be a issue with the font nothing you can do about it i'm afraid

Alex•4mo ago

It looks bad because of the way the font is built. However, you can achieve an approximation of an outline with a series of text shadows: https://codepen.io/Beanie127/pen/GRbaKVN

Beanie127

CodePen

Discount text-stroke

...

Alex•4mo ago

Note you have to set an actual colour on the text rather than transparent, otherwise the shadow will be visible behind the text, and to scale it up to larger sizes, you'd need an increasing number of shadows to fill in each angle to make it look even slightly good (to see what I mean, scale up each 1px to 4px).

emptyOP•4mo ago

Thank you. I'll try

Alex•2w ago

I know this is months old now but this popped up on Chrome.dev's CSS Wrapped article and tickled the memory of this question. Turns out the solution is paint-order: stroke fill https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

MDN Web Docs

paint-order - CSS: Cascading Style Sheets | MDN

The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.

emptyOP•2w ago

great :thumbup:

Choo♚𝕂𝕚𝕟𝕘•2w ago

It is possible to do with poorly designed fonts by using SVG text. https://codepen.io/chooking/pen/emOOQya

ChooKing

CodePen

SVG Text Outline

...

Choo♚𝕂𝕚𝕟𝕘•2w ago

The LOREM in my example uses Montserrat, which is one of the fonts that exhibits the problem you encountered, but it works with this technique.

Gaming

Programming

stroke text