Go to Medium’s homepage and find their logo. Then compare the one you found with the one above. Do you see the difference?
Let me put them side by side:
It’s squeezed.
Even though it is only missing one pixel on some letters, you can easily see the difference. In fact, I’ve always assumed the logo is based on the beloved Gotham because of its misrendered wide apertures. The logo is actually supposed to be narrower.
How did I find it out? It just never seems right to me. One day I finally went and pulled up their actual logo and did the comparison.
What happened?
Medium is using SVG to display their logo. In plain English, instead of using an image of their logo, they use a bunch of code to build up the logo. This is what the cool kids do, not only because it is light weighted and crystal clear, but also because it can scale to any size without losing clarity.
However, there seems to be some misconfiguration in the SVG code. Since it’s scalable, let’s scale it up take a closer look.
When the logo on the website (red) and the actual logo (green) combines:
How weird. Even the circle in the letter “i” is out of proportion.
What can Medium do?
Here are three options.
1. Update the SVG: Download it here
I couldn’t help but went ahead and created a corrected version. This is how it looks like once it replaces the current one.
2. Use an image instead
If due to some reason SVG is no longer an option, using an image is always a safe way to go.
3. Use live text
If you want to be creative and advantageous, using live text can help the performance (some font like PF Encore Sans Pro Medium or a font that is close to their logo’s font). Though if the font is not already in use, having to load a new font is not ideal.
