2.05.2019

Look at all of the doodads

Typography Specimens

Irvin Display

55px. Used on The Latest, Current Issue overview, Related Stories, Daily Cartoon
The W3C page About W3C says the W3C's mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. I disagree with this mission.
This property applies all ligatures, and then also renders them at their utmost level of precision. While somewhat taxing on weaker devices displaying large amounts of text content, the legibility benefits seem worth it. More information on this and other values, and their effects, can be found here.

NewYorker.com 2016

The W3C page About W3C says the W3C's mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. I disagree with this mission.


  • Irvin Display Rounder

    55px. Also known as NY Irvin Display DE. Variant of Irvin Display with fewer ligatures and word replacements.
    Look at how fewer doodads there are

  • Irvin Heading

    38px. Used on post titles.
    A Tasteful Page Title

  • Irvin Text

    12px. This variant appears to be used exclusively for rubrics. It's slightly heavier than Irvin Heading and less angular.
    From the rubric name dept.

  • Adobe Caslon (Regular, Bold, Italic & Bold Italic)

    18px, 150% line-height. Another distinctive typeface sourced from print. We load four versions: regular, bold, italic, and bold-italic. Originally designed in the 18th century, Adobe has added many digital features to it as of 1990 (More information can be found here). The version we currently use online does not contain many of the typographic changes that the magazine has made for legibility reasons, such as the removal of certain ligatures.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est turpis, lobortis sagittis iaculis sed, tristique eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer auctor nunc id purus semper ultrices. Integer euismod augue ac commodo facilisis. Aliquam efficitur bibendum ligula. Pellentesque vitae interdum leo, eget gravida felis. Nullam in convallis magna, nec scelerisque nisi. Curabitur gravida feugiat purus nec egestas. Ut dapibus sapien tortor. In placerat ipsum velit, non accumsan dolor dignissim id.

  • Georgia

    18px, 150% line-height. Georgia is a default font for virtually every device, so including it has a page weight advantage. However, italic and bold versions were deemed unpalatable (especially at larger sizes), so this never served as a full replacement for Caslon on newer templates.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est turpis, lobortis sagittis iaculis sed, tristique eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer auctor nunc id purus semper ultrices. Integer euismod augue ac commodo facilisis. Aliquam efficitur bibendum ligula. Pellentesque vitae interdum leo, eget gravida felis. Nullam in convallis magna, nec scelerisque nisi. Curabitur gravida feugiat purus nec egestas. Ut dapibus sapien tortor. In placerat ipsum velit, non accumsan dolor dignissim id.

  • Neutra Regular

    14px. Neutra has many uses throughout the site; including bylines, links, and low-hierarchy titles. As far as I can tell, we only use this weight of Neutra for certain link copy.
    A Tiny Link »

  • Neutra Demi

    20px. Generally speaking, the regular weight used for headings & titles at lower visual hierarchies.
    Sometimes, Page Titles Do Not Need to be Overly Emphasized

  • Neutra Bold

    20px. Used for primary navigation links and bylines.
    By Firstnäme St Lástnàme

    • Proposed

    The print version of The New Yorker has differing choices for many use cases. For ones that are the same (such as Caslon), we are using outdated equivalents on newyorker.com. Below, we have manually converted original print fonts to WOFF, to ensure maximum parity for tracking, ligatures, hinting, etc. We also aim to eventually move away from TypeKit hosting for performance reasons.

    • Irvin Display (New)

      55px. Suggested replacement for current. This is what the magazine uses.
      Look at all of the doodads (None. No doodads)

    • Irvin Heading (Updated)

      38px. Not much has changed.
      A Tasteful Page Title

    • Irvin Text (Updated)

      12px. Not much has changed.
      From the Rubric Name Dept.

    • Adobe Caslon (Regular, Bold, Italic & Bold Italic) (Updated)

      18px, 150% line-height. Ligatures and hinting have been slightly changed to match print.
      em sagittis strong.

    • Neutra Regular (Updated)

      14px. Very similar.
      A Tiny Link »

    • Neutra Demi (Updated)

      20px. Slightly more accurate hinting means that this weight is noticably thinner & crisper.
      Sometimes, Page Titles Do Not Need to be Overly Emphasized

    • Neutra Bold (Updated)

      20px. Very similar.
      By Firstnäme St Lástnàme

    TypeKit vs Self-hosting fonts

    Why do we want to move away from TypeKit? What's so bad about it?
    • Loads all fonts at once, regardless of use on the page.
    • Loads two external files at begining of page render, blocking other assets from loading.
    • Not subset (we use only a fraction of the characters & features included in the original files).
    • Our site appearance is tied to TypeKit—if it goes down like last week, so do our fonts.
    What's so great about self-hosting?
    • Fonts are loaded on-demand—if the user has not encountered Caslon Bold-Italic on the page yet, for example, this font will not load.
    • All files are loaded from our own server, which does not block other asset requests.
    • We have direct control over subsetting and compression. This results in much smaller files (sometimes around 50% smaller than TypeKit).
    • First-party hosting means that we never have to worry about what is happening with Adobe's servers.
    Whom else at Condé Nast has taken the time & effort to do this?
    • Pitchfork
    • GQ
    • Vanity Fair
    • Vogue
    • Bon Appétit
    • W Magazine
    • Condé Nast Traveler
    • Ars Technica
    • Teen Vogue
    Who has not?
    • Wired
    • Architectural Digest
    And before you ask—yes, the New York Times self-hosts their own fonts.

    A Note: Rendering


                    maxling

it is with a          heart
                heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07
    It’s important to declare what features we are basing this test on, as this can affect presentation and even implementation of many features, such as antialiasing, hinting, and ligature support. The following properties have been applied to some text on this page: 
    -webkit-font-smoothing: antialiased;
    This property controls the application of sub-pixel rendering on WebKit-based browsers: Safari, Mobile Safari, Opera, and Chrome. It is particularly noticeable on displays that are not high in pixel density—for example, any device that is not a recent iPad, iPhone, or MacBook Pro. Without the antialiased value, text incorrectly appears heavier than it is supposed to, unless the font file has been deliberately optimized for this scenario. The vast majority are not. 
    -moz-osx-font-smoothing: grayscale;
    Virtually identical to the property above, this controls the sub-pixel rendering of fonts on Mac OS X versions of Firefox. 
    text-rendering: geometricPrecision;
    This property applies all ligatures, and then also renders them at their utmost level of precision. While somewhat taxing on weaker devices displaying large amounts of text content, the legibility benefits seem worth it. More information on this and other values, and their effects, can be found here.