Background: In the design system I’m working on, I’m aiming for a seamless consistency between Figma and the Browser.
Has anyone already created a table of CSS values for Noto Sans that aligns Figma designs with rendering in Microsoft browsers (like Edge)?
I’m looking to match line heights and letter spacings as closely as possible and would greatly appreciate if I could see your mappings or get any tips on achieving consistent rendering. Already did it for <p> 16px, as you can see.
| Figma Element | Figma Font-Size | Figma Line-Height | Figma Letter-Spacing | CSS Font-Size | CSS Line-Height | CSS Letter-Spacing |
|---|---|---|---|---|---|---|
| Body Text | 16px | Auto | 0 | 16px | 1.47rem | 0.45px |
| H1 | ... | ... | ... | ... | ... | ... |
| H2 | ... | ... | ... | ... | ... | ... |