My Discovery of Font Outlines

A user asked a question in the Facebook group about whether or not font outlines were possible. In my head, my immediate response was not without using a font with an outline variant, but then someone else mentioned a “-webkit-text-stroke.” A quick look at MDN documentation, sure enough, it is there, it works very well and is supported by all modern browsers. After. This property is very similar to the text stroke in graphic design programs.

The request was for a list of words in a large block-style san serif font, but the beauty of this solution is that it can apply to any font. The CSS below targets a list, but it can be used anywhere. Also, this assumes it is inside another container of some type but dropping the ul would allow it to be applied to any list directly.

.list--outlined ul{
  list-style:none;
  color:transparent;
  padding:0;
}
.list--outlined li{
  margin-bottom:0px;
  line-height:1;
}
.list--outlined li:nth-child(odd){
  -webkit-text-stroke:1px var(--awb-color1);
  text-stroke: 1px var(--awb-color1);
}
.list--outlined li:nth-child(even){
  -webkit-text-stroke:1px var(--awb-color6);
  text-stroke: 1px var(--awb-color6);
}

Here is a quick example of the output based on the original request:

This is just another example of how far CSS has come and how creative we can be if we just take the time to dig into the documentation.