CSS - How to create: The Perfect Badge
An example case of proper em & rem usage.
People often ask me how to properly use em or rem when implementing a badge. This is a short story with examples that aims to explain a bit more. If you want to know more about how to use all the CSS Units, then check out this article: Cold Feet with CSS Units
The Goal
Find a CSS Unit so when you modify the font-size of a single number it will adjust the badge accordingly and keep the circle shape.
Code Examples
As you will notice, all the examples use the same boilerplate with only a slight difference. There is an HTML file and a CSS file. The html is a basic example with a wrapper div. The wrapper class just makes sure everything is aligned horizontal & vertical in the center of the screen. We focus on the span element with the badge class.
When you click on theCSS tab, you will see the use of px for the font-size on every example while padding & min-width are using a different CSS Unit depending on the example you are on. The CSS tab is where we will work in and on the Result tab you can see the magic.
Let’s get started with our first example and walk through some differences. If you get stuck, let me know by commenting or just reach out. My details are given on the bottom of this article.
Recap `px` example
In our first example we use a basic px CSS Unit. Which is the default browser unit. Try to increase the font-size to 175px and you notice the shape is turning into an oval. Which is not our first intend.
Try to make the circle round again. Keep playing with the settings until you do. This is an example case that happens quite often and gets most people stuck. You might already have had this issue on your own project somewhere. Let’s continue to the next example.
The `rem` example
Same as above, try to change the font-size to 175px and see what happens. Now go ahead and try to adjust the values to get a circle shape back.
As you notice, the badge is not getting that circle shape back easily. Let’s go to the last example.
The `em` example
Again same exercise as above, try to change the font-size to 175px and see what happens.
We have a winner! Magically it is working, but how come it works?
As em is relative to it’s contained element, here defined by whatever the font-size is. The bigger the .badge element gets, the bigger the representation of theem value will be.
So in this case, if we adjust font-size then the other values are enlarging relatively with this. Go ahead and tweak and modify the values on the example.
Conclusion
We can try to keep the circle, but if we go to high with our font-size our adjacent layout will fail anyway. We have this encapsulated case here of enlarging a badge. But in real world examples there are a few other players joining the team. We need numbers that are more than 1 digit or we have a layout where the badge needs to fit in with.
So it is better to set constraints on what is really important in our layout. Showing the number is most likely the most important. So instead of proportionally increasing the complete circle. We can increase just its side and keep a default top & bottom padding.
Usually I go with em as it stays very readable and when the content increases, it still will proportionally surround it with a nice padding. Depending on your design preference, you can tweak the above examples further. Try to change 1 into a larger number like 100 to see what the result is.
But of course keep in mind when the content is not an easy constraint value, neither will the surrounding padding be.
As I try to write more and get better at it. Don’t hesitate to share your own experiences along with possible improvements to this article. You can reach out to me on Twitter for more CSS & JS counseling. If you like pictures, follow me on Instagram.
