870998 - [Style Guide] Type Guidelines for Firefox OS product page

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect, P2)

Description

[Eric Pang [:epang] UX]

Attachment: Type Guidelines PSD

Hi,

Here are the assets for the type guidelines (02. Fonts)

Note: The 3 weight examples of the type face should use Feura Sans - I'll be attaching the font shortly.  Additionally, we will need to add an extra example set once Feura Sans Bold is ready.

Also, there are 2 download links for the bottom of the guide:

1. TTF Feura Sans Typeface (3 weights, waiting for Bold to be added)
2. Link to download the CSS file:
https://github.com/buildingfirefoxos/Building-Blocks/blob/master/util.css


Let me or Victoria know if you have any questions.

Thanks!
Eric

Comment 1

[Eric Pang [:epang] UX]

Attachment: Feura Sans (TTF)

Comment 2

[Steven Garrity [:sgarrity]]

Should the blue table borders be implemented as shown in the PSD file? We do have a less prominent table style in the mozilla.org style guide: http://www.mozilla.org/en-US/styleguide/websites/sandstone/tables/

Thanks.

Comment 3

[Eric Pang [:epang] UX]

(In reply to Steven Garrity from comment #2)
> Should the blue table borders be implemented as shown in the PSD file? We do
> have a less prominent table style in the mozilla.org style guide:
> http://www.mozilla.org/en-US/styleguide/websites/sandstone/tables/
> 
> Thanks.

Hi Steven, let's try it with the table style from the mozilla.org style guide to keep things consistent. Thanks!

Comment 4

[Eric Pang [:epang] UX]

Also wanted to add that the current example images are not final.  The ones currently act as place holders.  Victoria or I will provide updated screens once ready.  Thanks!

Comment 5

[Eric Pang [:epang] UX]

Hi Steven,

Because of file name changes some of the dropbox links are breaking.  So to be safe here's a link to the folder that contains all the guideline psds:

https://www.dropbox.com/sh/hj2af3ig1r16sre/yXkGA1nw6Q

Also, the images in the psd have all been updated and are ready to go. Thanks!

Comment 6

[Victoria Gerchinhoren [:vicky]]

Hi Steven,
I am putting the guidelines implementation feedback on the corresponding bug.

General:
Use Title Case for titles.

Basics:
> Align typeface demo to the left

Text styles:
> Text style Chart is missing the vertical gaps. There should be a gap in the inner horizontal blue lines dividing the columns.

Usage examples:
> Change the title  "Use examples" to "Usage examples"
> Outdated screenshots in "Use examples", please take the latest from here (file name MozillaFXOS_Type_20130626.psd): https://www.dropbox.com/sh/ti3o7e0k4dyzr0y/Zpf7ZHbvbI
> Separate the chart from the Usage Examples with tthe shadow 

Converting type, sizes in points, pixels and rem.
> Separate Conversion section from Downloads with the shadow.
> Inside Conversion Formula, separate horizontal divison line from the edge of the box (http://redpen.io/ed8s5k)

Comment 7

[Victoria Gerchinhoren [:vicky]]

The Feura Sans latest version link on Box.com can be provided by Patryk.

Comment 8

[Victoria Gerchinhoren [:vicky]]

Arnau can provide the link to the font CSS.

Comment 9

[Patryk Adamczyk [:patryk] UX]

Hey guys, so Feura Sans is a no go in terms of naming. We're changing the name in the next few days (pending legal approval), I have a new cut of the font as well. So we will have to delay until that is resolved. Sorry. I will attach the new font once the naming has been resolved.

Comment 10

[Steven Garrity [:sgarrity]]

Should we delay only the Type page for the font name issue, or should all of the Firefox OS guideline pages be held back?

Comment 11

[Patryk Adamczyk [:patryk] UX]

Attachment: Fira Sans.zip

Here is updated font. It contains all wieghts. We just need to change every instance of the "Feura" name to "Fira".

We can now proceed.

Comment 12

[Steven Garrity [:sgarrity]]

(In reply to Patryk Adamczyk [:patryk] UX from comment #11)
> Created attachment 779726 [details]
> Fira Sans.zip
> Here is updated font. It contains all wieghts. We just need to change every
> instance of the "Feura" name to "Fira".
> We can now proceed.

Thanks. Can we get this file hosted on box.com or the assets.mozillalabs.com site for the URL? We also need the CSS file linked to at the bottom of the page.

Comment 13

[Eric Pang [:epang] UX]

Here's my feedback on top of what Victoria has asked for:

Basics:
- Under the “Fira Sans Medium” example can we add another text example for Fira Sans Bold” (the font wasn't ready until recently, I've attached the font.)

Text Styles:
- In the chart the last column “Sample” should display the text with the settings before it.  Currently they are all the same.

Converting Type, Sizes in Points, Pixels and Rem:
- Change “This calculations are density...” to “The calculations are density...”

Download:
- Make the Download section match what's on the style of the action icon page.
Add a download heading
Download the Fira Sans Font in TTF or OTF
Fira Sans
|TTF button | OTF Button|

You can also download the text CSS here

---

The font is still being finalized, I'll add the box link once we have it (it should next week)

Thanks!

Comment 14

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #0)
> Created attachment 748202 [details]
> Type Guidelines PSD
> 
> Hi,
> 
> Here are the assets for the type guidelines (02. Fonts)
> 
> Note: The 3 weight examples of the type face should use Feura Sans - I'll be
> attaching the font shortly.  Additionally, we will need to add an extra
> example set once Feura Sans Bold is ready.
> 
> Also, there are 2 download links for the bottom of the guide:
> 
> 1. TTF Feura Sans Typeface (3 weights, waiting for Bold to be added)
> 2. Link to download the CSS file:
> https://github.com/buildingfirefoxos/Building-Blocks/blob/master/util.css
> 
> 
> Let me or Victoria know if you have any questions.
> 
> Thanks!
> Eric

Hi Arnau, can you provide Steven a new link to the font CSS?  The previous link is broken: https://github.com/buildingfirefoxos/Building-Blocks/blob/master/util.css

Thanks!

Comment 15

[Eric Pang [:epang] UX]

Attachment: Fira Sans.zip

Hi Steven, I've attached the finalized font!

Can you update the buttons to be 'TTF' and 'OT'?  The downloads can consist of the following (since we have Mono spaced versions now):

TTF
Fira Mono TTF
Fira Sans TTF

OT
Fira Mono OT
Fira Sans OT

Once this is updated let me now and we should be able to push live, thanks!
Eric

Comment 16

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #14)
> (In reply to Eric Pang [:epang] from comment #0)
> > Created attachment 748202 [details]
> > Type Guidelines PSD
> > 
> > Hi,
> > 
> > Here are the assets for the type guidelines (02. Fonts)
> > 
> > Note: The 3 weight examples of the type face should use Feura Sans - I'll be
> > attaching the font shortly.  Additionally, we will need to add an extra
> > example set once Feura Sans Bold is ready.
> > 
> > Also, there are 2 download links for the bottom of the guide:
> > 
> > 1. TTF Feura Sans Typeface (3 weights, waiting for Bold to be added)
> > 2. Link to download the CSS file:
> > https://github.com/buildingfirefoxos/Building-Blocks/blob/master/util.css
> > 
> > 
> > Let me or Victoria know if you have any questions.
> > 
> > Thanks!
> > Eric
> 
> Hi Arnau, can you provide Steven a new link to the font CSS?  The previous
> link is broken:
> https://github.com/buildingfirefoxos/Building-Blocks/blob/master/util.css
> 
> Thanks!

Hi Arnau, can you please provide the css link?  Thanks!

Comment 17

[Steven Garrity [:sgarrity]]

(In reply to Eric Pang [:epang] from comment #15)
> Hi Steven, I've attached the finalized font!

Thanks Eric. Should these font files be put on https://assets.mozillalabs.com/ or on the box.net site?

Comment 18

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

This is the new link:
https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/util.css

Comment 19

[Eric Pang [:epang] UX]

(In reply to Steven Garrity [:sgarrity] from comment #17)
> (In reply to Eric Pang [:epang] from comment #15)
> > Hi Steven, I've attached the finalized font!
> 
> Thanks Eric. Should these font files be put on
> https://assets.mozillalabs.com/ or on the box.net site?

Hi Steven, I've added zip files to box

Fira OT:
https://mozilla.box.com/s/bfsg7tn9gn5iz63k49jc

Fira TTF:
https://mozilla.box.com/s/c1rwpbixygvrr7wvrfdu


Thanks!

Comment 20

[Eric Pang [:epang] UX]

(In reply to Arnau March from comment #18)
> This is the new link:
> https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/util.css

Thanks Arnau!

Comment 21

[Steven Garrity [:sgarrity]]

I've updated the font links and re-enabled the Typeface page. The pages are also back up on our demo server again: https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/

Comment 22

[Eric Pang [:epang] UX]

(In reply to Steven Garrity [:sgarrity] from comment #21)
> I've updated the font links and re-enabled the Typeface page. The pages are
> also back up on our demo server again:
> https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/

Thanks Steven!

Comment 23

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/ffaf6149ece2535a630b7be2e1736d0f137689a4
Add visual design guidelines for Firefox OS
Bugs 870998 872747 8873482 872747 884424 863160

Comment 24

[Steven Garrity [:sgarrity]]

This is now in master and will be pushed into production soon.