So, here’s the easiest and most flexible way to do this. This will depend on you being able to serve slightly different CSS to different clients (there are, of course, any number of ways to do this—server-side according to user agent, via JS, etc. etc., so I’ll leave that part up to you).
What you’re going to want to do, to “bulk up” the rendering of the text on the offending clients, is to add this to the post body:
text-shadow: 0 0 0 rgba(0,0,0,0.87);
That’s right: a zero-offset, zero-blur text shadow. The alpha value should be at most equal to the alpha of the text color itself, though you’ll want to adjust it for different combinations of browser/OS. (For example, Chrome on Linux seems to render thicker/darker than Chrome on Windows, so you may want to set the alpha for the text shadow to be much lower for Chrome-on-Linux clients; and Firefox is different, etc.)
This lets you correct for rendering differences across browsers/platforms in a very fine-grained way.
So, it’d be really nice to be able to use the text-shadow trick (I really want to be able to adjust how post-titles look slightly to improve the overall site contrast)
It’s the sad case that while this trick looks excellent on my high resolution macbook, it looks kinda pixelated and cruddy on my desktop monitor. I’m curious if you’ve looked into that at all.
I sure have. What you do is, you use the resolution media query to set different styles for hi-DPI and low-DPI devices (I use a threshold of 192ppi, which includes all Retina screens from Apple, and all 4K monitors I’ve seen, and of course all smartphones from the last 5 years or something).
Then, as I said, you may want to serve slightly different CSS to Linux/Windows clients, and also use another media query to adjust things for Firefox, etc.; adjusting the alpha of the text shadow is the easiest way to do this tweak. (Whether it will in fact be necessary will of course depend on details; you can test that on the platforms/browsers in question and use your judgment.)
Then, you’ll want to provide an exception for Safari (setting for it the same style as you use for the low-DPI displays for Mac clients—regardless of target device), because (so far as I am aware), Safari’s text-shadow support is still buggy. (See, e.g., this GW style sheet, and Cmd-F “Compensating for Safari being terrible”, to see how to target Safari to make such an exception.)
So, here’s the easiest and most flexible way to do this. This will depend on you being able to serve slightly different CSS to different clients (there are, of course, any number of ways to do this—server-side according to user agent, via JS, etc. etc., so I’ll leave that part up to you).
What you’re going to want to do, to “bulk up” the rendering of the text on the offending clients, is to add this to the post body:
text-shadow: 0 0 0 rgba(0,0,0,0.87);
That’s right: a zero-offset, zero-blur text shadow. The alpha value should be at most equal to the alpha of the text color itself, though you’ll want to adjust it for different combinations of browser/OS. (For example, Chrome on Linux seems to render thicker/darker than Chrome on Windows, so you may want to set the alpha for the text shadow to be much lower for Chrome-on-Linux clients; and Firefox is different, etc.)
This lets you correct for rendering differences across browsers/platforms in a very fine-grained way.
So, it’d be really nice to be able to use the text-shadow trick (I really want to be able to adjust how post-titles look slightly to improve the overall site contrast)
It’s the sad case that while this trick looks excellent on my high resolution macbook, it looks kinda pixelated and cruddy on my desktop monitor. I’m curious if you’ve looked into that at all.
I sure have. What you do is, you use the resolution media query to set different styles for hi-DPI and low-DPI devices (I use a threshold of 192ppi, which includes all Retina screens from Apple, and all 4K monitors I’ve seen, and of course all smartphones from the last 5 years or something).
Then, as I said, you may want to serve slightly different CSS to Linux/Windows clients, and also use another media query to adjust things for Firefox, etc.; adjusting the alpha of the text shadow is the easiest way to do this tweak. (Whether it will in fact be necessary will of course depend on details; you can test that on the platforms/browsers in question and use your judgment.)
Then, you’ll want to provide an exception for Safari (setting for it the same style as you use for the low-DPI displays for Mac clients—regardless of target device), because (so far as I am aware), Safari’s text-shadow support is still buggy. (See, e.g., this GW style sheet, and Cmd-F “Compensating for Safari being terrible”, to see how to target Safari to make such an exception.)