0

I have a web site that is using the Adobe Source Sans Pro font.

On the website I would like to create a logo using this or a similar font but I would like to have it so there is almost no spacing between the characters. Is there a way that I can do this just with css or would I have to use another font?

If I need to use another font can anyone suggest an open source / free to use font that I could use for this.

Thank you very much.

0

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.

  • Thanks. I will try that. Do you think there's any difference between Open Sans and Source Sans Pro? I was really not sure what to use so picked the latter. But is one larger than the other or are there any other differences you know about? – Richard A Mar 17 '15 at 11:26
  • I tried your suggestion but it seems like there is always a minimum space between the letters and even putting the spacing at 0.0 will not change that. – Richard A Mar 17 '15 at 11:33
  • You can also use negative values in letter-spacing! – Yisela Mar 17 '15 at 11:59
0

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

See this example on codepen.

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.