16

I'm working on adding a black font outline to white text using CSS. The goal is the image below. So far I've been able to come up with below. Is there any other best practice to closer match the thin outline shown in the image below? Thanks! 

.introText {
font-family: 'Nunito', sans-serif;
-moz-text-fill-color: white;
-webkit-text-fill-color: white;
-moz-text-stroke-color: black;
-webkit-text-stroke-color: black;
-moz-text-stroke-width: 2px;  
-webkit-text-stroke-width: 2px;
font-size: 50px;
margin-top: 20vh;
}
}
<h1 class='introText text-center'>We've got your perfect spot.</h1>

enter image description here

AndrewLeonardi
  • 3,351
  • 9
  • 47
  • 100

2 Answers2

33

One way to do that is to use text-shadow and overlap multiple shadows:

.introText {
   text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

4 times in this case.

Example: 

.introText {
        font-family: "Nunito", sans-serif;
        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; 
        color: white;
        font-size: 50px;
        margin-top: 20vh;
      }
    <h1 class="introText text-center">We've got your perfect spot.</h1>

It creates a very similar effect and you can make it stronger or weaker depending on how many repetitions you use.

Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
Azametzin
  • 5,223
  • 12
  • 28
  • 46
-3

Maybe this is what your asking

.introText {
  font-family: 'Nunito', sans-serif;
  background: gray;
  color: white;
  font-size: 50px;
  font-weight: 400;
  border: 100px white solid;
  margin-top: 20vh;
}
<h1 class='introText text-center'>We've got your perfect spot.</h1>
Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
Sai Narasimha Tech
  • 34
  • 4