The default bug view has changed. See this FAQ.

[Style Guide] Type Guidelines for Firefox OS product page

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
P2
normal
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: epang, Assigned: sgarrity)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 2 obsolete attachments)

8.68 MB, application/x-photoshop
Details
1.91 MB, application/x-zip-compressed
Details
(Reporter)

Description

4 years ago
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
(Reporter)

Comment 1

4 years ago
Created attachment 748204 [details]
Feura Sans (TTF)
(Assignee)

Comment 2

4 years ago
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.
(Reporter)

Comment 3

4 years ago
(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!
(Reporter)

Comment 4

4 years ago
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!
Priority: -- → P3

Updated

4 years ago
Assignee: nobody → steven
Priority: P3 → P2
(Reporter)

Comment 5

4 years ago
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!
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)
The Feura Sans latest version link on Box.com can be provided by Patryk.
Flags: needinfo?(padamczyk)
Arnau can provide the link to the font CSS.
Flags: needinfo?(arnau)
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.
(Assignee)

Comment 10

4 years ago
Should we delay only the Type page for the font name issue, or should all of the Firefox OS guideline pages be held back?
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.
Attachment #748204 - Attachment is obsolete: true
Flags: needinfo?(padamczyk)
(Assignee)

Comment 12

4 years ago
(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.
(Reporter)

Comment 13

4 years ago
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!
(Reporter)

Comment 14

4 years ago
(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!
(Reporter)

Comment 15

4 years ago
Created attachment 795998 [details]
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
Attachment #779726 - Attachment is obsolete: true
Flags: needinfo?(steven)
(Reporter)

Comment 16

4 years ago
(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!
(Assignee)

Comment 17

4 years ago
(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?
Flags: needinfo?(steven)
This is the new link:
https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/util.css
Flags: needinfo?(arnau)
(Reporter)

Comment 19

4 years ago
(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!
(Reporter)

Comment 20

4 years ago
(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!
(Assignee)

Comment 21

4 years ago
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/
(Reporter)

Comment 22

4 years ago
(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

4 years ago
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
(Assignee)

Comment 24

4 years ago
This is now in master and will be pushed into production soon.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.