Open Bug 1425143 Opened 6 years ago Updated 1 year ago

Visualize fonts features/metrics for a specific node.

Categories

(DevTools :: Inspector, enhancement, P3)

58 Branch
enhancement

Tracking

(Not tracked)

People

(Reporter: karlcow, Unassigned)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [designer-tools])

This is not a priority for webcompat team. Just a nice too have feature, which could be cool for webdesigners, specifically with font geeks.


Some Web compatibility issues are connected to designs which are really tight or adjusted to a specific font (often Roboto). The issue is more acute on Android where the differences in between Roboto and Clear Sans are important enough to break a layout.

Sometimes it's hard to understand why this is breaking.

There could be a way to visualize when using the inspector to show some of the font features inside a box. 

1. Select an element 
2. activate a button to show baseline, ascender, descender, etc.

The goal is to visualize how the font fits in its environment. 

This article is a very good reference on how it would help understand what is happening.
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Thanks Karl. I've been thinking about this recently and would really love to have this in the tool at some stage.
Blocks: 1280059
Severity: normal → enhancement
Component: Developer Tools: Inspector → Developer Tools: Font Inspector
Priority: -- → P3
Product: Firefox → DevTools
Component: Inspector: Fonts → Inspector
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.