Exactly. The only reason it’s smaller is because the old logo with serif had more vector points and curves.
According to Google: https://design.google.com/articles/evolving-the-google-identity/#broader-distribution
Unfortunately there isn’t any standard, always-available font but, speaking of Futura, it’s fun to note that for many PC/Mac users, this code shows an improved Google logo in only 253 bytes uncompressed…
<span style="font-size:50px;font-family:Futura"><span style="color:#66f">G</span><span style="color:#f44">o</span><span style="color:#fd4">o</span><span style="color:#66f">g</span><span style="color:#4e4">l</span><span style="color:#f44">e</span></span>
1 Like
Because the cleverness is the justification.
I got it down to 200.
<span style=“font-size:50px;font-family:Futura;color:#f44”><span style=“color:#66f”>G</span>o<span style=“color:#fd4”>o</span><span style=“color:#66f”>g</span><span style=“color:#4e4”>l</span>e</span>
The two #f44 colors were delegated to the font defining span, so we could get rid of two span tags.
2 Likes
If we don’t count an imported style we could of course crunch it down even more… But I think that’d be cheating, because it’d be more data total, even if the inline part is smaller…
2 Likes
420 bytes as gif, crunched down to 240 bytes as png
1 Like
@shaddack & @bobtato : 153bytes even using the correct colors not the 3 char incorrect colors:
<style>g{font-size:4em;font-family:Futura;color:#4285f4}e{color:#ea4335}o{color:#fbbc05}l{color:#34a853}</style><g>G<e>o</e><o>o</o>g<l>l</l><e>e</e></g>
3 Likes
Butt… does it work in Opera 9.3? That’s the real test 
2 Likes
I don’t know…I don’t have that version installed…does it?
In HTML5 you are allowed to define your own elements, and “technically” in the spec they are supposed to contain a - but no browser enforces the dash, and they all support on the fly usage-as-declaration as i’ve done.
And really we are all relying on a large font file which kinda defeats the purpose…and exactly the sort of thing that that this optimization by google reduces…the font or svg encoding.
If we were to really have this contest we’d be using a stripped down 5 character web font base 64 encoded inline.
Because if we can include outside resources, like a font, then why not a stylesheet, or the image from google for that matter:
<img src=http://goo.gl/LCYBqo>
2 Likes
It’s been quite a while since I’ve done any web development. When I was still writing webpages, xHTML was my thing. I really ought to refresh my knowledge and look at HTML5. I kinda gave up when everyone started obfuscating their JavaScript so I couldn’t pull people’s working models apart and put them back together to do what I wanted.
1 Like
People rather quickly forget how they themselves learned, and stick their heads up their posteriors and stop sharing.
1 Like
That is exactly why I like CodePen or JSFiddle, they are concise ways to play with code and share what you figure out with others for the benefit of both parties.
1 Like
I also played around a lot with PHP. Never really learned how to use it effectively, but back in the day I got pretty good at stealing other people’s PHP code, slightly adjusting it to my needs, and just slapping it into the webpage.
Personally, I really like PHP. It’s like sed for the web.
1 Like
i agree. they don’t care. not one bit.
1 Like
needs visual aids.
But that sort of decadent color precision goes against Google’s whole design ethic! What are they, Apple?
Hmm. I didn’t realize that the lowest common denominator was quite so awful.
1 Like
As a consumer, I don’t really care about the KB or vectors. All I see is a logo that went from college down to kindergarten.
3 Likes
I really guess they used normal SVG paths to achieve that effect in as little SVG code as possible. Even using a rect for the “l” is going to be bigger than just using another path. Also, there are slight deviations in the original logo from your design.
I think they have selected the design for their new logo very carefully, not only for reasons of byte-savings. It’s also highly recognizable, lends itself to simple adaptions (as can seen in the initial doodle) and removes a lot of optical redundancy.
