draw_down was downvoted for this, but I agree. If you're going to write an article on this, you _should_ know, or at least try to.<p>This would have been more educational if perhaps instead of the author guessing at what behavior should occur, they read the standards[1][2][3] and told us what should occur. There are even definitions in the specifications for how to lookup the nearest available weight.[1][4]<p>It seems like the author doesn't understand what liberties you have as an implementor. For instance:<p>> In the computed tab, Edge, Chrome and Firefox are all showing font-weight: bold to be computed to a font-weight of 700, whereas Safari's computed font-weight doesn't have a numerical value, it just remains computed as "bold." But this still doesn't explain much.<p>Well, OK, but the _author_ didn't explain much. This little tidbit isn't meaningful, it's just an observation without an explanation as to why. But a cursory read shows the specifications clearly state that bold is the same as 700.<p>> Wait.<p>> I add ,700 to the end of this string: Poppins:400,600. My heading re-renders and now matches Safari.<p>Well, yeah.<p>From Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification,
"15.6 Font boldness: the 'font-weight' property"<p>"If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
If the desired weight is greater than 500, weights above desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used."[1]<p>From CSS Fonts Module Level 4,
"5.2. Matching font styles"<p>"If the desired weight is inclusively between 400 and 500, weights greater than or equal to the target weight are checked in ascending order until 500 is hit and checked, followed by weights less than the target weight in descending order, followed by weights greater than 500, until a match is found.<p>If the desired weight is less than 400, weights less than or equal to the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.<p>If the desired weight is greater than 500, weights greater than or equal to the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found."[4]<p>> So what do I do to render headings consistently across browsers and platforms?<p>Read the specifications. If you're arguing that Core Text doesn't draw like FreeType or Direct2D/DirectWrite, well, sure, but the specifications don't force you to output particular bitmaps.<p>[1]: <a href="https://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight" rel="nofollow">https://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight</a>
[2]: <a href="https://drafts.csswg.org/css-fonts-3/#font-weight-prop" rel="nofollow">https://drafts.csswg.org/css-fonts-3/#font-weight-prop</a>
[3]: <a href="https://drafts.csswg.org/css-fonts-4/#font-weight-prop" rel="nofollow">https://drafts.csswg.org/css-fonts-4/#font-weight-prop</a>
[4]: <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm" rel="nofollow">https://drafts.csswg.org/css-fonts-4/#font-matching-algorith...</a>