: How can I condense a Source Sans Pro font so the characters almost touch when 30px size? I have a web site that is using the Adobe Source Sans Pro font. On the website I would like to

@Chiappetta793

You can use negative letter-spacing to achieve that effect.

See this example on codepen.

Vote Up Vote Down

@Murray976

There is a CSS property you could use: letter-spacing, which can also have negative values.

p {
/* 16 * 0.0625 = 1px */
letter-spacing: 0.0625em;
}



The letter-spacing property controls the amount of space between each
letter in a given element or block of text. Values supported by
letter-spacing include font-relative values (em, rem), parent-relative
values (percentage), absolute values (px) and the normal property,
which resets to the font's default.


More info: CSS Tricks on letter spacing



If you only want to do this for the logo, you could have each letter in a separate span, and then apply a negative margin to the spans.

Something like:

span.letters {
display: inline-block;
margin-left: -3px;
}




Regarding the font choice, you could try with Open Sans.

Vote Up Vote Down