Is there a way to outline a font in Bubble?
When I put font over top of pictures, I would usually want to outline the font (if white text, outline in black) to make sure that all of the letters stand out and are legible. I have somewhat achieved this using the text shadow, but it is not as effective as an outline because it is meant to blur.
Any suggestions?
Fonts don’t really work that way, as far as I know.
Getting a good contrast on top of photos is a little tricky…one approach would be to add a gradient on top of the image that moves into a more solid color and then place the font over that part of the photo.
If you look at thenextweb.com you can see what I mean.
Another way to do it would be to browse Google font’s for one that has the “bubble” characteristic you’re aiming at.
This search is for display fonts
Thanks for the input. I assumed they don’t work like that, but figured there must be some type of solutions people use for high contrast font.
I will probably stick with similar work arounds to thenextweb.com, but would still love to hear about or see examples if anyone else has some ideas to help place test over photos
Fonts definitely work like that. Anyone had any luck? I’m new to Bubble and this is one that I’m trying to figure out.
If Photoshop can do it, there is no reason why a web browser can’t do it. The letters are rendered as objects on screen with a definite edge, and Bubble places outlines on other objects rendered on screen with definite edges.
In general, if you want to place text over photos you should use a display font, and avoid fonts with serifs or other small details. Without an outline it definitely gets tricky, and it’s less about rules, and more graphic design sensibilities, or trial and error.
It’s not perfect, but I was able to get a text outline by doing the following:
