Does hiding site title and or tagline or site description matter SEO

Question

In so many tutorials and videos I  have seen everyone mentioning about the importance of site title and site description. In some cases they even use <h2> for site title and <h1> for site description .
<header>

<div id="logo"><a href="#"><img src="images/logo.png" alt="Logo of the Company" title="Company Title"/></a></div>

<hgroup>
<h2 id="site-title">Site Title</h2>
<h1 id="site-description">Site Description</h1>            
</hgroup>

</header>

OPTION 1 :  In some webpages we are not able to see  title or description  instead there will be a logo . In this case they use text-indent to hide them

#site-title,
#site-description{
    text-indent: -9999px;
    }

but there is a disadvantage in this they take-up the space in the header and to compensate this we need to put some margin on the following items

OPTION 2 :  instead of the text-indent we can use "visibility:hidden"

#site-title,
#site-description{
    visibility: hidden;
    }

but the same problem arises in this case too

OPTION 3 : display: none

#site-title,
#site-description{
    display: none;
    }

here the text vanishes and doesn't take-up any space but it also vanishes for the crawler making this method not seo friendly
How can I put them there for SE-Crawler, but invisible from the eye without taking place?

Answer 1

Using the CSS clip property will be the best solution to this issue .

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

   h1#site-title,
    h2#site-description{
        position: absolute;
        clip: rect(1px 1px 1px 1px); /* IE7 */
        clip: rect(1px, 1px, 1px, 1px);
    }