In headings, I am getting rid of spaces between two-word phrases and using color to differentiate between the words instead.


I would like this...

<h1>Two Words</h1>

to render like this...


How can I achieve this style while maintaining accessibility? The issue is that I don't want to simply remove the space in the html. Will I have to use javascript to strip them out? Would there be accessibility issues with that too?

  • Since this has to do with code, I'm not sure why it was migrated to the Graphic Design forum. Commented Sep 11, 2011 at 18:26
  • Web questions are allowed here provided the questions and answers relate to CSS affecting layouts and not just to any of the other technologies typical in web stacks (i.e., not just HTML, SQL, JS). Commented Sep 12, 2011 at 18:59

4 Answers 4


You could try:


h1 span {
    display: none;

That'll handle the code-related accessibility issues.

  • 1
    Probably is the best way to accomplish this, since CSS doesn't affect how Google sees your page or screen readers. And it's most appropriate because the markup is still semantically meaningful, while the CSS is only affecting presentation. Commented Sep 11, 2011 at 18:31
  • And how would you go and color them different?
    – kaiser
    Commented Sep 11, 2011 at 20:01
  • add another span around one of the two words and then give the span's classes to distinguish them apart.
    – DA01
    Commented Sep 11, 2011 at 20:12

I like @Jin's answer, but I would use the ex measurement, or another relative measurement. px is an absolute measurement.

<h1><span>TWO</span> Words</h1>

h1 { word-spacing: -0.5ex; }
h1 span { ... }

The CSS rule above works perfectly for a variety of faces and sizes from 10px to 27px (at least). The -8px rule from the previous answer only looks right with a font size of 16px (IMO).

Check out the W3C "Font-relative lengths" topic - pretty interesting stuff.

  • 1
    Not "ex", "em". Em is the relative measurement to the width of the inherited font-size. Commented Sep 11, 2011 at 18:29
  • 1
    You obviously did not click the link. Title of the W3C reference: "5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units...(note the second measurement).
    – Dawson
    Commented Sep 12, 2011 at 5:35

you can try

<h1><span>Two</span> Words</h1>

h1  { word-spacing: -8px;  color: #ff0000; }   
h1  span { font-weight: bold;  color: #000; }

you can play with word-spacing: -npx based on your font-size


If you'd use php, the code would be something like this:

function gdse3647_headline( $input, $echo = false )
    $output = '';
    // Make uppercase
    $headline = strtoupper( $input );
    // Build array
    $headline = explode( ' ', $headline );
    // Number the single words
    for ( $i = 0; $i <= count ( $headline ); ++$i )
        $output .= "<span class="headline-{$i}">{$headline[ $i ]}</span>";

    if ( $echo )
        return print $output;

    return $output;

If you'd call it like this:

echo '<h1>' . gdse3647_headline( 'Two Words' ) . '</h1>';

...your output would be (in plain html)...

    <span class="headline-1">TWO</span>
    <span class="headline-2">WORDS</span>

...and you could style it however you want via css (see @Jin answer for ex.).

Still wondering what this has to do with Graphics Design...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.