Change Fontsize

[reaper81]

Hello everyone,

can I change the fontsize in general? I have a lot of modules but not enougth space on the screen. Thanks a lot.

[strawberry 3.141]

@reaper81 yes you can

.xsmall {
  font-size: 15px;
  line-height: 20px;
}

.small {
  font-size: 20px;
  line-height: 25px;
}

.medium {
  font-size: 30px;
  line-height: 35px;
}

.large {
  font-size: 65px;
  line-height: 65px;
}

.xlarge {
  font-size: 75px;
  line-height: 75px;
  letter-spacing: -3px;
}

put that in your custom.css file, change the numbers to your liking and you will cover most of the modules which uses those css classes

or what @j-e-f-f suggested in the other thread https://forum.magicmirror.builders/post/25506 to scale everything in the same portion

[reaper81]

thanks, i will try it. strange that nobody asked this before.

[anustart]

This post is deleted!

[anustart]

Do I need to past all of the above in CSS file?

Is this redefine what the preset fonts already are?

[j.e.f.f]

@anustart if you simply paste the above you’ll have no change, as I believe these are the defaults for these classes. Modify the values for font-size and line-height to your liking. You may also want to add letter-spacing properties to decrease space between letters in order to fit more on one line. Example:

.medium {
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -2px;
}

If you really want to get your hands dirty, you may want to consider switching to a narrow font. (I believe RobotoCondensed is already included by default):

.medium {
  font-family: 'RobotoCondensed';
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -2px;
}

[anustart]

@j.e.f.f that work!

[howi42]

@j.e.f.f said in Change Fontsize:

RobotoCondensed

But that leads to a general question about the fonts :
RobotoCondensed is not in the fonts directory, they all have an addition, like RobotoCondensed-light, etc…
Does that matter ?
The main.css uses ‘Roboto Condensed’.
Again, is that difference important ?
Thanks

[j.e.f.f]

@howi42 it just means that there are several weights available. When you use the font in your CSS, you can specify the weight as follows:

font-family: "Roboto Condensed";
font-weight: normal; /* bold, 300, 100, etc. */