Reducing font size causes letters to overlap.

[atltiger81]

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.

[sdetweil]

@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

[atltiger81]

@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?

[atltiger81]

@atltiger81 I finally figured this out. Here’s the solution to reduce the font size of the compliments module without the letters of text jamming together. Using custom.css to override the “xlarge” font to a smaller px size as suggested above won’t work. The xlarge font character spacing distorts more and more the smaller the specified size. You need to change the font in the compliments.js file itself from xlarge to medium or small (whichever size you prefer). Here’s the specific line of code in that file to edit (line 144 as viewed on github, or thereabouts):

wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";

[sdetweil]

@atltiger81 no, don’t change the code

just add a classes property to the compliments module config

{
   module:"compliments",
    position:"....",
    config: {
        compliments:  {
         ...
         ...
         },
         classes:"..........  whatever"
      }
}

from the doc