How to Add an Outline Stroke to Website Text

Web fonts are essentially vector graphics. That is why they can remain sharp at 12px or 120px. Vector shapes are defined by points and mathematical descriptions rather than fixed pixel data. This makes effects familiar from vector tools, such as drawing an outline around characters, possible on the web too. For example:

h1 {
  /* Prefix required. Even Firefox only supports the -webkit- prefix */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

or shorthand

h1 {
  -webkit-text-stroke: 1px black;
}

View the text stroke example

h1 {
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

example