New Horizons Get Schooled Blog

Overlay text on images with CSS to increase site optimization (Web Design)

Overlay text on images with CSS to increase site optimization (Web Design)Do you cherry pick non-web-safe fonts when you’re looking for some visual variation? Take note: The web design process is smoother if you don’t. For front-end website developers, designs with custom fonts that are unusable online have to be merged into a single image, which is not beneficial for site optimization.

When front-end developers opt to use images with the text overlay included in the graphic, it saves a lot of time and effort because the developer does not have to create the additional styles to ensure that the text remains in the correct position and displays a consistent font. However, this shortcut does not do the website or user any favors in the long run.

Solution: To increase site optimization, use web-safe fonts in the design process and CSS to overlay text on images instead of as a single graphic. Not only does this make the text readable by search engines, but it also creates a more fluid experience for those accessing the site from a mobile device.

Posted on 8/10/18 10:41 AM by Get Schooled in CSS, in SEO, in web developer

Get Schooled

Written by Get Schooled

Search by Topic

    Lists by Topic

    see all

    Be at the center of it all.

    SUBSCRIBE TO NEWSLETTER