Forum Discussion
Css/ Html rendering advice needed
New to Braze Bonfire - Hi, i'm Nikita, the Senior CRM Executive at Treatwell.
A shot in the dark here, but wondering if anyone in the community has specific expertise/experience with CSS and HTML rendering for custom fonts/fallback fonts and rendering background colours for dark mode?
I'm in no way an 'expert' and have a couple of pain points which I could use some advise on.
Thanks in advance to anyone who might be able to help.
Using web safe fonts are going to be your best bet. These usual ones are: Arial, Helvetica, Verdana, Georgia, and Times New Roman. This is a good site to find others if you want to test: https://www.cssfontstack.com/
You can stray from these lists, but I would not recommend it while using coded text. You will need to identify your users' devices or email clients to ensure the widest compatibility so that your design works in as many inboxes as possible. Creating a font stack that starts with your branded font then falls back on reliable web fonts is another way, but you would need to set and understand the expectation that not everyone will see the same design because of compatibility issues.
There are some good guides on Dark Mode, but if you keep your designs simple and understand how images will look in both light and dark modes, then you should be able to build some reliable standards and templates. I know this is bit vague on this topic, but it really does fall back on how much you rely on text vs images, and how each are implemented. I would recommend Googling "Dark Mode email best practices" for the best answers.
