0

I received permission to make some changes to the company's website. All I've done so far is change Font Color and Background Color. Doing so though made drastic changes in leading (line-height) and kerning (letter-spacing).

I'm really not the greatest at web design, and have never gone from a dark background to a light one. Do all browsers automatically make this change? Has CSS always done this?

To be clear I'm not using line-height or letter-spacing. They're not in my .CSS file at all. But visually they changed.

Here's a side-by-side:

enter image description here

I switched the left side to Multiply and positioned it directly on top to compare:

enter image description here

Is there a published standard somewhere that browsers use to determine a contrast to leading/kerning ratio or something? I've never experienced this before.

Improve this question
1
  • I'd suggest getting a 'before' and 'after' page up and comparing the Computed panels in your browser's inspect element tool between the two with the problem elements selected, so you can see exactly which properties end up different
    – user56reinstatemonica8
    Commented Jun 2, 2014 at 9:34

1 Answer 1

Reset to default
5

How does color affect kerning and leading in CSS?

It does not.

I will go mad and make my comment an answer:

  • check that it is not just zoom-levels in your browser you have accidentally fiddled with
  • Do a dry-run: change in firebug (or other webdev tool) and see exactly what parameters you need to alter (rightclick on element). Firebug will not let you "break" the css
  • Most likely, chances are you have lost a curly bracket {} somewhere, or a semi-colon somewhere (you do not need a semicolon on the last line of your selector, but for cleanliness it is best not to skip it).

There is no earthly reason why changing colours should do anything but that.

Improve this answer
7
  • Thanks guess I must be missing something then. I'll check on Monday and let you know but pretty sure zoom isn't it cause I looked on multiple windows
    – Ryan
    Commented May 31, 2014 at 0:24
  • It happens to the best of us :) but Firebug or webdev tools are your friends, splendid for checking stuff like this live, before going live :D And the missing curly bracket is a classic - that would break all sorts of stuff.
    – benteh
    Commented May 31, 2014 at 0:28
  • 1
    Me, I'm voting for the semicolon, a messed up selector, or a missing quote/bracket somewhere. Simply changing the color does not do that, but I've run into several occasions where I would have sworn up and down that that's all I changed, only to find out I nuked something elsewhere or forgot a semicolon, etc. OP, try to run a diff between the two versions of the files to see if anything else is different -- that will probably reveal any issue faster than looking at it by eye.
    – Kerri Shotts
    Commented May 31, 2014 at 3:03
  • 1
    Hi @KerriShotts yes, the bracket or the semicolon is usually the culprit. All manner of wild things breaks then. The problem is that if you panic a little, or are not familiar with css, you start to try to fix it in all sorts of other places, and therefore create more problems. :)
    – benteh
    Commented May 31, 2014 at 13:32
  • @Ryan I Almost forgot, but for some reason RandomO'Reilly reminded me of the CSS validator. You might wanna run the css through it. Best case scenario is that it'll give you valid/fixed code in return.
    – Joonas
    Commented Jun 2, 2014 at 9:09

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.