I’m designing a website and mocked up a layout in canva to share with my client. Now that the client likes the design, I have begun to write html and css. Now the problem I am facing is the text size in canva is 90 and when I set the font size in css to font-size: 90px it turns out to be a bit small.
I have to redo the sizes to make it look appropriate.
Canva like other programs such as Google Docs, MS word, etc. uses points as unit instead of pixels.
So, 90pt = 120px whereas 90px = 67.5pt (calculated using online converter)
That is why, 90 pixels size in CSS is appearing smaller than your canva file.
So the solution for you is switch to other designing programs suited for website design like figma or adobe xd that allows pixel sizing or else you will have to convert each size from points every time to have matching font sizes to your canva file.
Or realize that web designing is not the same as print designing and don’t try to achieve exact replication. Different screen/windows sizes require different font sizes, so your design will need to accommodate that.
For example, your canva design will look great on a laptop or a standard monitor at full size. How is it supposed to look on a cell phone (which has the opposite orientation) or in a browser window that has been shrunk to part of a screen?
It is generally considered bad practice to use pixles for fon’t size units in web design. Relative units like em and rem are preferred. By default 1em is equal to 16px so you can work out from there.
But be aware that users may change that default for their browser, so the size you set isn’t necessarily what they will see anyway.
That’s why it’s important to strive for a fluid design that will stand up to such changes. It’s not just for mobile use, but an accessibility concern too.
But in short, use relative units like em or rem and adjust the size to what looks right for your design. Don’t worry about matching a design pixel for pixel.