1

I have a page with weather, and I cannot figure out how to make these cells for daily weather more ... legible, I guess is the best word. Maybe "easier to read" or "better" in general.

I want to keep the page background and cell background the colors they are now, but I would like the day of the week and temperatures easier to read; as you can see, they are not easy to read. I would also like to keep the same scheme - red for high temperatures and blue for low temperatures - but they do not have to be the exact colors I have here.

My CSS:

html, body {
    background-color: #121212;
    color: #efefef;
    font-family: "OCR", "Courier New", "Courier", monospace;
}

.weatherCell {
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px;
    margin: 0 10px;
    background-color: #efefef44;
    color: #efefef;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 700;
    border: 1px solid #DFDFDF66;
    text-shadow: 1px 1px 1px #000000;
}

Weather Cell - Before

EDIT:

Here is what this now looks like after some help from @JanusBahsJacquet:

Weather Cell - After

Improve this question
8
  • 1
    You could start off by not using an OCR font. OCR fonts are meant to be read by computers, not humans – they’re more or less inherently difficult to read (not to mean not very nice to look at). Yours seems to be quite squished as well. And if you want blue and red on a dark grey background, you’ll have to make them lighter, because dark on dark doesn’t work. And why is the background such a dark grey, incidentally? It looks like it means clouds and thunderstorms., which is not what the yellow circle and the temperatures indicate…
    – Janus Bahs Jacquet
    Commented Jun 4, 2021 at 17:01
  • @JanusBahsJacquet I like the OCR font, it pleases me. the background is dark because the page has a dark theme. Do you mean make the red and blue lighter? like #FA8072 and #ADD8E6?
    – Brian
    Commented Jun 4, 2021 at 18:24
  • Yes, the red and blue need to be lighter. You need contrast from the dark grey. The black text shadow on a dark background isn’t helping either. And while the OCR font may please you, it’s not very legible, especially not when kerned so tightly.
    – Janus Bahs Jacquet
    Commented Jun 4, 2021 at 18:28
  • @JanusBahsJacquet So, yes ... using a lighter red and blue definitely made things better. It's funny you mentioned the letter spacing as I used letter-spacing: 0.25em and everything looks SO much better. I thought since the cell background was light (#efefef44), that making the red and blue lighter wouldn't help, but it did. I'm really bad a color, style, and design in general. Thank you!
    – Brian
    Commented Jun 4, 2021 at 18:32
  • 2
    Change the font. Even if you like it, it's not suitable for visitors.
    – Scott
    Commented Jun 4, 2021 at 21:45

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.