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. – Joel Glovier Sep 11 '11 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). – Philip Regan Sep 12 '11 at 18:59

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. – Joel Glovier Sep 11 '11 at 18:31
  • And how would you go and color them different? – kaiser Sep 11 '11 at 20:01
  • add another span around one of the two words and then give the span's classes to distinguish them apart. – DA01 Sep 11 '11 at 20:12

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


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. – Joel Glovier Sep 11 '11 at 18:29
  • 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 Sep 12 '11 at 5:35

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, privacy policy and cookie policy

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