This difference is likely due to variations found in the rendering engine of your design tool vs web-based browser, which seemingly results in slight deviations:
- Design tools and web browsers are different mediums with different font-rendering engines. Put simply, design tools do not render based on CSS and HTML, as they are not web browsers. Different browsers (e.g., Safari vs Chrome browsers) will show variations in rendering as well.
- Points, for measuring typeface, is not a precise measurement. Point size (or ‘pt’) refers to the bounding box of the letter — not the letter itself. Differences in font files and rendering engines may also add to the rendering discrepancy.
- The rendered image can also vary based on the DPI (Dots per Inch: a measure of the resolution of a printed document or digital scan) and zoom settings of your design tool vs. your web browser.
For example, if you create a PDF in Adobe InDesign, that tool’s rendering engine will define “11pt” font differently than what Lob’s web-based rendering engine defines “11pt” to be. Points, for measuring typeface, is not a precise measurement. In metal type, point size refers to the height of the metal body on which a typeface’s character is cast. In digital typefaces, the metal body is replaced by an invisible box known as the em square. Each character fits inside that em square or em box. The em size of a font is equal to its point size.The point size is also used to measure leading (line-height), line length and other elements, apart from font size.
Given the point size system is not based on a universal standard, any differences that exist are likely due to rendering engines. It is best practice to review requests in your Test Environment, prior to requesting them in the Live environment.