: How can I remove a space between two words and still make it accessible? In headings, I am getting rid of spaces between two-word phrases and using color to differentiate between the words

@Eichhorn212

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)...

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


...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...

Vote Up Vote Down

@Kevin459

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.

Vote Up Vote Down

@Voss6371140

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

Vote Up Vote Down

@Shelley591

You could try:

<h1>Two<span>&nbsp;</span>Words</h1>

h1 span {
display: none;
}


That'll handle the code-related accessibility issues.

Vote Up Vote Down