I took a look at Google’s parent company Alphabet’s  website today. It a clean little one-pager. The thing I noticed was their handling of the logo.

Screen Shot 2015-10-08 at 9.20.00 PM

At first it looks like a simple logo font. Turns out their doing some old-school web shenanigans.

`#logo {

  1. background-repeat: no-repeat;
  2. background-position: 0 0;
  3. color: transparent;
  4. font: 0 / 0 a;
  5. text-shadow: none;
  6. background: url(../img/logo_2x.png) 0 0 no-repeat;
  7. background-size: 100px 24px;
  8. height: 24px;
  9. left: 24px;
  10. position: absolute;
  11. top: 18px;
  12. width: 100px;
  13. z-index: 999;
}`

Notice the  `color: transparent;` and `font: 0 / 0 a;`? In the past we usually saw `position: absolute; left: 9999px;` or something to through it off the page. This is basically the same thing, they’re just shrinking the font to nothing, and making it transparent. Actually, the font declaration caught my eye. Turns out it’s short-hand for `

  1. font-size: 0px;
  2. line-height: ;
  3. font-family: a;`

For the most part it’s very neat, simple and clean. Even this feels like a neater version of that old hack. However, it’s standard now to not hide text in anyway, but instead to render a picture element with a title and alt tag.