-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create typography component in code #3342
Comments
Are you sure about the calculations @vnys ? |
No, I moved it to Google Sheets ;) Calculations based on CapSize. Made a codepen, but it doesn’t add up (yet). But if you want to take it from here that would be great :) |
Amazing resource: https://github.com/jantimon/text-box-trim-examples |
I think I have it now. I made a a full page codepen with both Inter and Equinor aligned and un-aligned, and the formulas in Google Sheets. I had made an error in the |
Amazing @vnys 🥳 Great work and creds for diving deep to solve this. Will you adjust the calculations in our components according to the new adjustments made? |
I’m curious to see if we can use @oddvernes’s CSS solution in the typography component first: --margin-top: calc((((1lh - 1cap) / 2) + var(--offset)) * -1);
--margin-bottom: calc((((1lh - 1cap) / 2) - var(--offset)) * -1); That would simplify things a great deal, at least on the web. Not sure if there’s support for |
By the way |
If the line-height was provided as unitless value then in css we can do |
Heads up @vnys |
This component can not be finalized until color tokens are ready. |
owner: @torleifhalseth
We are currently looking into using Inter as a replacement for the Equinor typeface in UI components on mobile. This issue will eventually be fleshed out with information needed to create the typography component while we’re waiting for support for CSS text-box-trim & text-box-edge.
Inter properties
Using Capsize with
14px/20px
, the resulting CSS is:The CSS for the Equinor font:
The text was updated successfully, but these errors were encountered: