While now uncommon, there was once a time when the only way to achieve a stylized text treatment online (drop shadows, colored outlines, etc.) was to use an image.
How designers would create header images
Designers would handcraft the treatment in a photo editing software, prepare it for use on the web, and hand it off to a developer. This developer would then be charged with removing the actual text from the screen, of which there are dozens of techniques, and replacing it with the image.
The problems with using images as site titles
Unfortunately, there are many pitfalls to this approach:
- First off, while browser consistency has come leaps and bounds since the pioneering days of the web, it is still difficult to achieve parity between browsers. Replacing a text element in a browser can often require several different blocks of styling to ensure that the design remains the same across all browsers that LexBlog supports, which can increase the chance that something will be overlooked or that a single browser will fail our visual regression tests.
- The web has also gotten more complicated since the days where replacing text with an image was considered standard practice. Now websites are expected to render well across dozens of devices, fluidly flowing from one viewport width to the next. While responsive images have some a long way, text and SVG are far better suited to resize as the size of the viewport changes. Most images will lose clarity at a certain point as they resize, rendering the text unreadable.
- Lastly, many text replacement techniques don't consider accessibility (making your website unusable for those using assistive technologies like screen readers) or can run afoul of Google's Webmaster Guidelines.
Ultimately LexBlog's philosophy is simple: Your browser is very capable of rendering text - let's keep it doing what it's good at!