I would think you’ll be okay by hiding the text like that. Google will of course be able to read it. You might want to place the <span> before the <img>.
That all being said, why don’t you just add an alt tag to the image?
Yes I’ll be adding the alt tag aswell, more weight for seo text, not sure if it matters if I put the <span> first or last, I’ve seen a few other sites using this technique who always placed the <span> last. I’m mainly using this to get a better display of the titles and trying to stay away from using sFIR to force the font style, I think it’s also a popular accessibility technique that other developers use??
Also with links:
<h2><a href=“link.html”><img src=“sub-heading.gif”><span>Sub Heading</span></a></h2>
or
<h2 id=“img_display”><a href=“link.html”><span>Sub Heading</span></a></h2>
Google gets wary about text that is positioned off the page - just in case it’s being used for search engine spamming - in the same way that it is wary about text that has the same foreground and background colour.
However, Google is also smart enough to know that positioning text in this way is a legitimate design strategy, and to figure out when it is being done for good reasons and when it is being done for bad. As long as the words you use in the sub-heading do relate to the content of the page, Google should realise that it is a genuine heading, and index it in exactly the same way.
A couple of other tips for using that kind of image replacement technique:
All images must have an alt attribute. In this case, as you are repeating the content of the image, you can leave it empty, ie alt=""
It is good practice to add a title="Sub-heading" attribute to the image, particularly if you have used a font that is less clear, so that people can hover over the image and get a tooltip of what it says