How do I get keywords indexed when text is so complexly styled that words are broken up?

Question

I was required to implement a web page that has sections where each has a designed title. Basic structure like the following:

<div class="page">
    <div class="section">
        <h1>title section 1</h1>
        section content
    </div>
    <div class="section">
        <h1>title section 2</h1>
        section content
    </div>
</div>

My problem is that the web designer made titles visually complex like the following image:

Note that "SO" and "MOS" in the picture are not two words actually but just one word "SOMOS", but that's the design I was asked to achieve.

I replaced the h1 tags with the following HTML structure for each title

<div class="customH1">
    <div class="quienes">¿QUIENES</div>
    <div class="so">SO</div>
    <div class="mos">MO<span class="underlined">S</span>?</div>
</div>

With this structure and CSS I achieved the design so everything is ok so far. My doubt is about SEO. Remember "SOMOS" word? I don't know if search engines will understand the section title "QUIENES SOMOS" considering it's split in three different DIVs. I don't know if search engines will understand "QUIENES SO MOS", "QUIENES SO MO S" or something else than the real title.

I thought about giving a title attribute to the container DIV but I read it just helps for readability and not for SEO.

I also thought about using an image and give it an ALT attribute because I understand search engines consider ALT attribute only for IMG tags but I don't think that is efficient to use images.

I finally thought about using SVG and giving it a TITLE tag as I read somewhere this helps describe the SVG but I don't know if that helps with SEO.

<svg>
    <title>I don't know if this will help with SEO while having a nice title designed in this SVG</title>
</svg>

Do you have any suggestions to make my designed titles SEO friendly? or may be my current structure will somehow be understood by search engines already?

UPDATE: I just used http://www.seo-browser.com page to crawl my page and I got the following output: "¿QUIENES SO MO S ?" I don't know if it is safe to think Google will do the same. If it does then I need to fix this.

UPDATE: At least with Browseo.net there was a difference when deleting spaces between DIVs

<div class="customH1">
    <div class="quienes">¿QUIENES</div>
    <div class="so">SO</div><div class="mos">MO<span class="underlined">S</span>?</div>
</div>

I hope Google sees it the same way.

Answer 1

I think You can wrap all the divs into one h1 tag. My guess is that Google will essentially see it as <h1> ¿QUIENES SO MO </h1> or as <h1>¿QUIENESSOMO</h1>

<div class="customH1">
<h1>    
<div class="quienes">¿QUIENES</div>
<div class="so">SO</div>
<div class="mos">MO<span class="underlined">S</span>?</div>
</h1>
</div>

The client window sees it as:

¿QUIENES SO MOS?

In the end I wouldn't obsess over h1-h3 tags too much. They're a keyword ranking signal but Google has learned how to analyze the content on a page far beyond what it could several years ago and so the h1 tags are likely not as important as they once were. I don't think h1 tags are necessary on a site and a lot of my sites don't even have them, although they would probably give it a slight SEO boost.