Read the statement by Michael Teeuw here.
Reducing font size causes letters to overlap.
-
I reduced the font size of the Compliments module in custom.css, which was straight forward. But the smaller the font size, the more the individual letters overlap. At 30px, every letter is jammed together and touching, and at 20px they’re overlapping and almost unreadable.
I’ve tried changing to various different fonts, but they all behave the same as font size decreases. I’ve searched this forum and everywhere for a solution, but have not seen this problem mentioned. There are modules currently running in my MM with much smaller fonts natively that all look fine, so I’m perplexed about the cause and how to resolve. -
@atltiger81 this typically doesn’t happen
I don’t know but you can look at the font size settings for small, medium, and large in main.css and compare it to what you are doing
sounds like you modified the spacing, not just the size
-
@sdetweil
I don’t know how the character spacing is being modified, since my only code in custom.css is:.compliments .xlarge { font-size: 30px; margin.bottom: -35px; }
From your suggestion, I checked main.css and it shows the font sizes as:
font-size: 20px;
font-size-xsmall: 0.75rem;
font-size-small: 1rem;
font-size-medium: 1.5rem;
font-size-large: 3.25rem;
font-size-xlarge: 3.75rem;I haven’t modified anything else. The only modules I’m running are MMM-OpenWeatherForecast, clock, and compliments. Anything else I can check?