We are pretty new using Concrete CMS. We’re trying to develop a dark mode for our theme. We simply switch/toggle background and font color triggered with a button. But when dark mode is active, most of the type seemes too bold, even though it is the same font size. Is there a solution to that or is there a theme with dark mode included?
Thank you all for Help
Cedric
Use elemental cloner Elemental Cloner - concrete5 to create a cloned package, then you can modify the less/css to suit, such as your desire to reduce the weight of bold when dark.
Thanks for your suggestions.
We are using an Elemental clone.
Reducing the weight allows me from e.g. 400 to 300. But that’s too light, it looks definitively as another weight.
Maybe with shadow?
Most fonts don’t actually implement all font weights. So when you specify a particular weight, the browser uses the closest weight the font actually provides.
First you could try the next 100 along in font weight and see if it renders differently and visually does what you want.
Adding shadow to text can have the effect of blurring and obscuring readability, so needs a very light touch.
After that, if a bold is too bold, you could try changing the colour of the bold text to reduce the contrast between the text and the background. This can have a similar visual effect. Or the opposite if it is not bold enough.
If you develop for modern browsers and want to fine-tune your dark mode typography, you could use a Google Variable Font (or any other variable font) and adjust the font-weight axis. Variable fonts allow finer weight adjustments. If you have font-weight 400 for normal, then use for dark mode font-weight 375. To further improve readability don’t use pure white text. Use an off-white e.g. #ffffe6 to avoid glare.
2 Likes
Thanks for the hint on variable fonts. That sounds exactly what we need. We’re building a site where lots of documents are served.
How do I find variable fonts and how would I install these fonts?
Google has quite a selection: fonts.google.com, - just below the search field, check the box «show only variable fonts» and choose a font.
or directly fonts.google.com/?vfonly=true
Variable fonts are installed like other webfonts, see embed instructions.
More useful instructions you can find at https://web.dev/variable-fonts or do a search yourself.
To style your type with CSS you have many options. You can use next to weight an italics also width, slant and optical size. The use of variable fonts is not a trivial thing. It depends on what you want to achieve and it requires a certain knowledge of typography.
2 Likes
For some reason we can’t make it work. We installed the fonts (Roboto Slab) properly and use the css as advised. But the font does not render in the way we want. We work with Concrete CMS v. 8.5.5 on a simple Elemental theme.
We tried to find more information on variable fonts and ConcreteCMS without success.
Do you @blinkdesign or anybody else have experience with the use of variable fonts?
Make sure you have a newer browser. See → Variable fonts | Can I use... Support tables for HTML5, CSS3, etc
You have a URL so I can look at it?
PM sent.
Yes, let’s open a new discussion about variable fonts.