Visual: Update Typography Assets

[aminalhazwani]

No description provided.

[TLHuang]

@aminalhazwani I've updated the exported SVG to Google Drive, and the source file is updated as well.

Preview all the assets for typography

[aminalhazwani]

Thanks helen! I added the pictures and they are visible here http://design.firefox.com/photon-staging/visuals/typography.html. I found three tiny issues which I took the liberty to fix, I hope it's ok.

Shadow on the right side of the fira sans visual asset (removed shadow)

San Francisco Light Semibold (removed "Light")

Typo in typography label

Regarding the typography labels can you tell me more on the style? Should we use the sketch measure only for sizes and not for typography? Thanks!

[TLHuang]

@aminalhazwani Thanks for correcting them! For the typography labels, I would like to keep it as it is for now. Considering the label may contain a longer string for different use cases in the future. If it's with a solid background like size, I think that will be a big color box right above a component or example, and it's a bit distracting user to focus on the main content. What do you think?

Also, just found there is some text haven't been converted to outlines, I will export the assets again. Should I upload them to this issue? or open a new one to fix it?

[aminalhazwani]

Great, thanks @TLHuang! Regarding the typography labels yes, it makes sense, thanks for the explanation. I was wondering if there is any way to make the link between the label and the content more explicit. I tried something like this (see below) similar to the highlight that you used for the iconography assets. What do you think?

Maybe at this point the line/arrow is not even needed.

Regarding the new fixes feel free to push them to staging, either via a PR or directly to the branch 👍 If you need any help feel free to ping me!

[TLHuang]

Good idea! Agree that showing highlight for a better connection between the label and the content. Already updated the assets and created a pull request 178.

[aminalhazwani]

Awesome, thank you @TLHuang!