[Style Guide] Font sizes shown in samples are not accurate

VERIFIED FIXED

Status

www.mozilla.org
Bedrock
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: José Vittone, Assigned: sgarrity)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1210158] , URL)

Attachments

(3 attachments)

(Reporter)

Description

4 years ago
Created attachment 8336812 [details]
Style Guides at 16.28.46

Samples are bigger than the definition because the multiplier is wrong.
The body font base should be 10px in order to make those "rem" works correctly.

10 pixels = 1 rem
(Reporter)

Updated

4 years ago
Summary: [Style Guide] Font sizes shown in sample is not accurate → [Style Guide] Font sizes shown in samples are not accurate
(Reporter)

Updated

4 years ago
Attachment #8336812 - Attachment description: Screen Shot 2013-11-22 at 16.28.46.png → Style Guides at 16.28.46
Hi Steven,
Can you help us look into this? This is for the typeface guideline in the style guide.
https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/

Also we need to update one line that currently reads:
"165ppi / 72 pt = 2.91667px" it should be "2,29167" 

Let us know if you have any questions,
Thanks!
Eric
Assignee: nobody → steven
Flags: needinfo?(steven)
(Assignee)

Comment 2

4 years ago
Changing the base font size on the body doesn't really make sense for the style guide page. I'm thinking we should either fake these sizes with pixels or points, or use an image of the text.

I don't think we necessarily need to define the font size in the style guide example in exactly the same way as it will be done on Firefox OS devices, as there are a variety of differences (including base font size, as in this case).

José or Eric, do you have a recommendation?
Flags: needinfo?(steven) → needinfo?(epang)
(Reporter)

Comment 3

4 years ago
Hi Steven, 

I agree, definitely. I think the idea is to represent them correctly more than to implement the same way. I believe that using pixels or em, would be fine.

Let's wait for Eric comments.
Hey Guys, I think it might be easier to use images like Steven suggested.  What do you guys think?
Flags: needinfo?(epang)
(Reporter)

Comment 5

4 years ago
We agreed with Eric that using images seems to be the best solution for this. What file format do you prefers? Transparent PNGs?
Flags: needinfo?(steven)
(Assignee)

Comment 6

4 years ago
Created attachment 8340391 [details]
Firefox-OS-Type-Sizes.png

Yeah, images sound fine. Do these sizes (attached) look right? PSD is here: http://adobe.ly/18s8fMZ
Flags: needinfo?(steven)
(Reporter)

Comment 7

4 years ago
Created attachment 8340491 [details]
Slicing Text Styles

I prepared them for you, ready to use ;)
(Assignee)

Updated

4 years ago
Component: Gaia → Bedrock
OS: Mac OS X → All
Product: Firefox OS → www.mozilla.org
Hardware: x86 → All
fixed on stage https://www.allizom.org/en-US/styleguide/products/firefox-os/typeface/
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
(Reporter)

Comment 10

4 years ago
The h1 sample is being resized via CSS, please check it.
(Assignee)

Updated

4 years ago
Whiteboard: [kb=1210158]
(Assignee)

Comment 12

4 years ago
This has been fixed in master and will go into production with our next push.
(Reporter)

Comment 13

4 years ago
Great! Thanks Steven ;)
thanks for handling this guys :)
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.