Streaming live at 10am (PST)

Where are points (pt) in font size definitions?

WCAG 2.1 (accessibility guidelines for websites) defines color contrast in terms of font size, expressed in POINTS (pt), one of the oldest units of typeface measurement and in the CSS standard since 1.0.

Why does Webflow not offer a “pt” option in its font size unit dropdown? What’s the workaround?
Screen Shot 2020-12-02 at 4.50.38 PM

Points are a not used on the web as they’re based on traditional print—from what I can tell, they are using this terminology to relate it back to a physical size when viewing on a monitor:

The actual size of the character that a user sees is dependent both on the author-defined size and the user’s display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.

For all intents and purposes you can assume that PX is the physical representation of PT for a digital medium, however the two are not equal. As an example, 10pt may be appropriate for a book while 15px is more appropriate for a webpage—this is because each situation calls for a different distance from the user to the medium.

It gets a bit tricky because someone can choose to have a different “base” font size on their browser, however that’s where EMs and REMs come into play. Unless you specifically call out a base font-size at the HTML root, it will be based on the default value set within the browser (typically 16px), and then you can relate your sites font sizes based on this value.

I’m by no means an expert on this stuff but hopefully that gives you a better idea why there isn’t PTs in the list within the Designer. Good luck :+1:

Sorry Mike, I don’t want to appear argumentative, and you are right that the points system is quite old and does originate with print.

However, points are very valuable to us in any digital design medium because they separate SIZE from RESOLUTION. When you are setting a font to 16px you are saying that the height of the font will be 16 pixels, which as you should know, might translate to any number of different actual sizes due to the RESOLUTION of the device (pixels per inch or PPI). Things get a little more complicated when we start talking about pixel density, as that is a relatively new concept and contradicts PPI a bit.

All this notwithstanding, if you want to be a responsible web developer in 2021 (I’ve been building websites since the late 90s), then you better start paying attention to the WCAG (Web Content Accessibility Guidelines), and they specifically talk about font sizes in terms of POINTS not PIXELS.

All I’m asking is that Webflow support one of the basic and original units of measurement in their tool. I hate when other software developers over-simplify things but here I’m going to go on a limb and suggest that adding “PT” to the pull-down menu for sizes should be less than 4 hours of work, and should be able to easily fit within their next sprint.

Thanks for the reply and the continued discussion. I actually have been doing a lot more over the past year towards understanding and implementing proper WCAG in my projects (as most other developers in the last couple years with the surge in making the web accessible for everyone) and this is an avenue I’ve wanted to learn more about.

While I don’t disagree with anything you mentioned in your reply, my original response wasn’t meant to discredit the use of point, but instead provide some reason as to why it’s not a dropdown option. The reason you’re not seeing it in the Designer (or really any other web design tool for that matter) is because the actual size of your font size can vary wildly based on how the user is digesting the content. Someone on an old mobile device is getting a much different visual representation of size than someone on a modern tablet or a professional designer a 6k retina screen.

As we both know, points are based around physical print sizing, so 1 point is equal to 1/72 of an inch. A pixel on the other hand has been standardized around a 96ppi display, even though this varies wildly with most phones for example averaging around 300ppi. That means that 1 pixel is equal to 1/96 of an inch, so therefore 1px = .75pt:

The problem with sizing our type around points rather than pixels is 1pt would actually be equal to 1.3333333333 pixels. While we’re able to have decimals in our pixel sizes, this leads to the browser rounding the value to the nearest pixel (assuming your browser is at 100% zoom). Outside of typography, pixel decimals (aka sub-pixels) are a fairly common occurrence in websites for things like layout, but as John Resig explains in the write up below using the example of four equal columns within a 50px container, each browser actually rounds these decimals a bit differently:

Since pixel units are physically limited to the size of the pixels within a given devices display, it’s most common to use these units during development and relate the sizing to point values as needed based on WCAG—rather than trying to go the other direction. Both situations need to account for a number of of these nuanced conditions and the goal of making a project accessible can be done with either starting point, however, in my opinion, basing your sizing around the limitations of the medium make the most sense. It’s not uncommon to see certain digital software (like Word or Illustrator) use point sizing, however this is because the end product can end up being viewed on a physically printed medium. Websites on the other hand, are exclusively viewed on a digital screen—unless of course you print out the page for reference.

Interestingly enough, when the iPhone 4 came out with it’s “Retina” display (which packed twice as many pixels in the same relative display size—320x460 with a density of 640x960), Apple moved to using points for sizing to account for this discrepancy. I actually had no idea this was the case, since I don’t develop within the Apple ecosystem, but it popped up in my research. While other devices use similar methods (Android uses “density-independent pixels”, which for all intents and purposes is the same as Apple’s use of points), the term “points” in digital-only mediums is not really all that common. That’s not to say they don’t exist and they aren’t related back to pixels (as mentioned in the example of 1px = .75pt), but the standardization is just not quite there to accurately relate the two in every situation.

Sure, Webflow could include a pt option in the dropdown but it would only be an approximation (most likely 1px = .75pt) which doesn’t necessarily make the projects more accessible than referencing this sizing relationship while using pixels. Ultimately there’s a lot of unknowns that make this type of unit hard to be truthful to all real world situations.

All that said, it may be worth reaching out to Webflow Support regarding the missing unit and/or submitting a Wishlist idea for others to throw some support behind. It’s very possible that they may have a plan for introducing it at some point in the future alongside their accessibility efforts, or even adding it as a line item in the Audit Panel which converts the pixel size to an estimated point value in a number of situations.

Hopefully my rambling made sense (without coming across as argumentiative either) and gave you an idea what my goal was with my original reply. I actually really enjoyed digging deeper into the topic and learning more about the subject, but as you can tell there’s a bit more that goes into the use of point sizing outside of just “throwing the unit in there” if they want to actually improve overall accessibility on their sites.

Hope you had a great holiday! :webflow_heart:

P.S. - In terms of transparency, I don’t work for Webflow, I’m just a long-time user of the platform and someone who’s been dabbling with web design for the last 15 years or so.

Very interesting explanation, thanks!