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.

  1. What would you recommend in this case the best approach?
up vote 2 down vote accepted
  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.

  1. This won't hurt SEO.

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

  • thank you for help and great explanation :) – Radek Dec 1 at 7:23

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

  • That is great, if I may ask, I know this is working for just 1st letter - is there a pseudoelement or something that I can use to make let's in title "Hello World Again" - all the first letters to be capitalized? Thank you – Radek Dec 3 at 9:21
  • @Radek Use text-transform:capitalize on the h1 – Maximillian Laumeister Dec 3 at 16:46
  • actually, my apologies, that one I know - I meant have a styling for every each first letter in the word styled. – Radek Dec 5 at 1:24
  • 1
    @Radek I am pretty sure there is no CSS property for that, unfortunately. Related. – Maximillian Laumeister Dec 5 at 1:30
  • Thank you @maximillian – Radek Dec 5 at 6:21

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.