A
A
Alexander2017-11-05 08:05:43
Design
Alexander, 2017-11-05 08:05:43

How to properly work with font-sizes in Sketch (pt to px)?

I'm laying out the layout, I met text with a size of 5px - 7px . I tell the designer: "Your font sizes are too small here, you can barely see them, you should increase them", to which I get the answer: "dude, these are not pixels (px), but points (pt)". Started googling.
Found:

  1. Yes the sketch uses pt instead of px for font sizes
  2. Found a bunch of calculators that convert you pt to px
  3. It is better not to use it for layout, as the results may vary from browser to browser.
I start testing.
I set the value 5pt - 7pt , I look in the browser all the rules, this is another matter. Then I try to convert all font-size to pt . And then the layout starts to fly into the trash.
59fe9987c1f3c820768117.png
The screenshot above is font-size: 15px for the texts.
59fe9a3ab2d5c113218217.png
The screenshot above is font-size: 15pt for the texts.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Andrey Khokhlov, 2017-11-05
@andrhohlov

Interesting.
Created a block of text, size - 14 (something).
Right click - Copy CSS Attributes. I also get font-size: 14px.
And I have the layout at my fingertips, I'm typing from it, similarly to the 14px text.
If I used the formula about 1px = 0.75pt ( https://stackoverflow.com/questions/44730718/sketc... ), then it should be 19px.
I export the layout to jpg, take the PixelPerfect extension, apply the layout to the layout.
No, it's clearly 14px.
Use the same method, you will understand what font-size is actually needed. In the end, just adjust by changing in the inspector.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question