Change WordPress.org logo on the Header

[hugobaeta]

I would like to update the header logo on WordPress.org sites to the ​new version and size it to match a bit better the safety margins in the guidelines (I'm actually taking a little out so the logo doesn't end up too small). I also improved the color by making it white (I always felt that header logo looked muddy in that gray).

Here's a comparison before and after:

The new image dimensions (that would need to be updated in the css) are 290x46.

New files (regular and retina @2x) are attached to the ticket.

[hugobaeta]

Regular version

[hugobaeta]

Retina version (@2x)

[michaelarestad]

The new colors are a definite improvement. The type feels a pixel or two too close to the icon (maybe that's a topic for elsewhere or it's the pixel hinting or something). Other than that, this looks good to me.

I'm wondering if it should eventually be an SVG.

[hugobaeta]

Replying to michaelarestad:

The type feels a pixel or two too close to the icon

When you say type, I'm assuming you mean the menu, right? I agree, but I was trying to not touch any other elements there. If we could increase the height of the header by a few pixels, the added white space would likely look and feel great. But, yeah, that's for another ticket ;)

I'm wondering if it should eventually be an SVG.

Not sure about the technical implications of such decision, that's more up your alley. Do you want me to produce one? Does it work well at the regular 1x size?

[dd32]

Replying to hugobaeta:

Replying to michaelarestad:

The type feels a pixel or two too close to the icon

When you say type, I'm assuming you mean the menu, right?

I believe @michaelarestad was referring to the gap between the W and WordPress.org which although is set as W/20 in the metrics, feels like the edge of the W in WordPress is hovering above the outer ring of the W (to me at least).

For some reason the images on the identity page feel like they've got a larger gap than the preview in the cloudup here.

[mattmiklic]

Replying to hugobaeta:

I would like to update the header logo on WordPress.org sites to the ​new version and size it to match a bit better the safety margins in the guidelines (I'm actually taking a little out so the logo doesn't end up too small). I also improved the color by making it white (I always felt that header logo looked muddy in that gray).

Good call here. The current logo was sized based on a design that used a more compact header, with the tabs over to the right (​https://cloudup.com/czKjhPIEYAS). With all the stuff going on in the header now a smaller logo feels better.

The new colors are a definite improvement. The type feels a pixel or two too close to the icon (maybe that's a topic for elsewhere or it's the pixel hinting or something). Other than that, this looks good to me.

Yeah; I think it's because of the pixel hinting. The serif on the left edge of the W is extending into the margin between the W mark and WordPress by one subpixel, which I think makes them look too close. Just shifting the text over by 0.5 to 1 pixel would probably help this.

I'm wondering if it should eventually be an SVG.

SVG would be nice. Note that there are quite a few devices out there with pixel ratios > 2, so if we only provide 1x and 2x images, they'll be scaled up for those devices. Note the blurriness in this iPhone 6s screenshot of the current homepage logo. I'd go with an SVG but if not, we'd really need a 3x version of the PNG as well.

[melchoyce]

Yeah; I think it's because of the pixel hinting. The serif on the left edge of the W is extending into the margin between the W mark and WordPress by one subpixel, which I think makes them look too close. Just shifting the text over by 0.5 to 1 pixel would probably help this.

+1

I'm wondering if it should eventually be an SVG.

If we're replacing it now, I think we should be replacing it with an svg.

Looking really good!

[ocean90]

SVG sounds good. 👍

[melchoyce]

@hugobaeta Can you provide an SVG?

[hugobaeta]

@melchoyce Uploaded everything I had here, let me know if this works :)

[melchoyce]

Replying to hugobaeta:

@melchoyce Uploaded everything I had here, let me know if this works :)

Thanks pal 🙌

[obenland]

@melchoyce @hugobaeta I'd love to get this in, any new on the SVG file?

[melchoyce]

Made an svg from @hugobaeta's pdf: wporg-logo.svg​

[melchoyce]

Also made a light version: wporg-logo-light.svg​

@hugobaeta, can you review?

[melchoyce]

In context.

[hugobaeta]

@melchoyce my only comment is that I'd wish the W mark wasn't muted out. That was one of my pet peeves with the current header. There's no reason for it, really. What do you think?

[melchoyce]

Yeah, I think having it all one solid color would be totally fine. How does this look? wporg-logo-light.2.svg​

[hugobaeta]

Looks good to me! Thank you!

[obenland]

In 6313:

Header: Update WordPress logo

Now adheres to WP.org style guidelines, including safety margins, and uses an SVG for better scaling.

Props melchoyce, hugobaeta.
See ​https://make.wordpress.org/design/handbook/design-guide/wordpress-org/wordpress-org-identity/
See #1530.

[hugobaeta]

Woot Woot!! Thank you @obenland and @melchoyce for making this happen! Such happiness, much wow! :D

[obenland]

In 6315:

WPorg: Update WordPress logo.

See #1530, [6313].

[obenland]

In 6316:

WPorg: Cache bust.

Fixes #1530.

[obenland]

In 6389:

Support Theme: Update wporg-header styles.

The support theme doesn't share the sass structure of most other wporg-* themes, so it needs to be updated separately.

Props chetan200891.
See #1530.
Fixes #3384.