Does having a <span> tag around a portion of a word hurt SEO?

Question

If I do

<h1>H<span style="font-size: 12px;">ello</span>
W<span style="font-size: 12px;">orld</span></h1>

1. Will search engines read it as "Hello World"?
2. Will this hurt SEO?

I am not doing any JS or anything else. I just want the other letters smaller. I know I should find a font called "Small Caps" - but for this font that I have does not exist.

3. What would you recommend in this case the best approach?

Answer 1

Using a span like that does not hurt SEO, however there is no reason to do it when the ::first-letter pseudoelement exists. You can do the following to style just the first letter without messing with your markup:

h1 {
  font-size: (your preferred font size for the rest of the text);
}

h1::first-letter {
  font-size: (your larger font size for the first letter);
}

So to answer your question the ::first-letter pseudoelement is actually the best approach here, if it fits within your design constraints.

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

Answer 2

1. Yes, this is ok and Search engines would see the text as "Hello".

Reason: Drop caps, Websites likes NYC.com uses drop caps, drop caps needs special CSS codes without div, span or class drop caps are not possible but Search engines still crawl them. You just have to make sure Search engines can crawl your site.

2. This won't hurt SEO.

3. There is no recommendation needed in this case but try referring to drop caps.