Design and prototype your ideas with the community.

Bring your ideas to life with a growing community of design makers and thinkers.

CSS text styling question


  • Contributor

    How do I achieve the same white highlighted text as this website's hero heading?

    https://hpsnz.org.nz/what-we-do/

    0_1542731355502_Screenshot 2018-11-20 at 16.12.26.png

    I tried this:

     font-weight: 300;
      text-transform: uppercase;
      font-size: 50px;
      letter-spacing: 0.58em;
      line-height: 1.1em;
      background-color: #1B2437;
      padding: 0 0 0 13px;
      white-space: nowrap;
      margin:.3em 0;
    

    But the highlight doesn't fit the text exactly — and it wraps at different breakpoints to the text itself.

    0_1542731317001_Screenshot 2018-11-20 at 16.14.41.png

    Any ideas would be lovely 🙂



  • @suzy Hi Suzy! I would do it using a span like this:

    <h1><span class="highlight">Hello</span></h1>
    
    
     h1{
      font-weight: 300;
      color:#fff;
      text-transform: uppercase;
      font-size: 50px;
      line-height: 1.1em;
      white-space: nowrap;
      margin:.3em 0;
     }
    
    .highlight {
      background-color: #222;
      padding-left:0.58em;
      letter-spacing: 0.58em; 
    }
    

    The span is an inline element rather than block, so it doesn't mess with any positioning. That's how I understand it anyway!

    Because the letter-spacing is 0.58em, it left a space after the last letter (an extra 0.58em on the right), so I added a padding left of the same amount to make it even. Here's a codepen for you:

    https://codepen.io/GraemeFulton/pen/vQpKzZ

    What is it for by the way, what are you making?

    -Graeme CSS helpline +4587271928832983 📞


  • Contributor

    @Graeme Thank you!

    I'm building a website for a mindful fitness company. I'm using Squarespace to provide a stable base and customising the CSS to have full control over the visual design. Unfortunately, I can't edit the HTML or use a span — there is only editing access to the CSS. Is there another way to achieve the highlight? 🙂



  • @suzy I see, in that case, you could try adding the highlight class to the H1 tag, and set it to display:inlinelike this:

    <h1 class="highlight">Hello</h1>
    
    
     h1{
      font-weight: 300;
      color:#fff;
      text-transform: uppercase;
      font-size: 50px;
      line-height: 1.1em;
      white-space: nowrap;
      margin:.3em 0;
     }
    
    .highlight {
      background-color: #222;
      padding-left:0.58em;
      letter-spacing: 0.58em; 
        white-space: nowrap;
      position:relative;
      display:inline;
    }
    

    I updated the CodePen to reflect that: https://codepen.io/GraemeFulton/pen/vQpKzZ



  • @suzy Mindful fitness company sounds really cool! Like headspace style?


  • Contributor

    @Graeme super, thank you!

    Yes, a bit like Headspace but focused on improving athletes' performance.


  • Contributor

    Nearly there!

    How do I make sure the words aren't broken in the CSS @Graeme ?

    0_1542736021986_Screenshot 2018-11-20 at 17.46.42.png



  • @suzy just add a line-height to the CSS and you should be good!