WordPress.org

Make WordPress Core

Tagged: design Toggle Comment Threads | Keyboard Shortcuts

  • Matt Miklic 3:14 pm on July 7, 2016 Permalink
    Tags: , design, ,   

    Native Fonts in 4.6 

    When WordPress switched to Open Sans in version 3.8 at the end of 2013, the state of typography on the web was just beginning to evolve. Before, our choices for typefaces were limited to a small subset of fonts reliably installed on most major operating systems. And, in some cases, those fonts were optimized for print, not the web. Open Sans is optimized for the screen, has generous character support, and, best of all, is open source. For these reasons, it was a better option for a modern web app than the system fonts of that time.

    Today, the landscape has changed. The majority of our users are now on devices that use great system fonts for their user interface. System fonts load more quickly, have better language support, and make web apps look more like native apps. By using the same font that the user’s device does, WordPress looks more familiar as a result. This change prioritizes consistency from the user’s perspective over consistency in branding. And while typography does play a role in the WordPress brand, the use of color, iconography, and information architecture still feels very much like WordPress.

    To this end, Font Natively (#36753) replaces Open Sans with a set of system fonts that covers major operating systems, including Android, iOS, Windows, macOS, and Linux.

    The Font Stack

    Safari, Chrome, and Firefox on iOS and macOS have new CSS values that return the current system UI font, but on other platforms, the font has to be declared by name. As such, the font stack includes the following:

    • -apple-system for Safari (iOS & macOS) and Firefox macOS
    • BlinkMacSystemFont for Chrome macOS
    • Segoe UI for Windows
    • Roboto for Android and Chrome OS
    • Oxygen-Sans for KDE
    • Ubuntu for Ubuntu
    • Cantarell for GNOME
    • Helvetica Neue for versions of macOS prior to 10.11
    • sans-serif, the standard fallback

    The complete CSS declaration: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    Details

    The operating system’s UI font is used for any text that’s part of the WordPress user interface. In other contexts, like the Editor, we continue to use a serif system typeface, Georgia. This creates a clear typographic distinction between text that is part of the interface, and text that is part of the user’s content.

    Not all system fonts provide the same range of weights that Open Sans did. We recommend using only the 400 and 600 weights, which will display most consistently across all platforms. I’ve created a test page that shows the difference between Open Sans and your current device’s system font at every available weight. (A collection of screenshots of that test page is also available).

    The order in which they’re called is important, because we want the user’s system font to be the first available font in the stack. For example: if Roboto were listed ahead of Segoe UI, Windows developers who have installed the Roboto font for Android development would see it instead of their native system font. There may be edge cases if users have manually installed these fonts on their machines, but this order should work best for the majority of users.

    When using this font stack, it must be called using the font-family property, and not the font shorthand. This works around an issue in Microsoft Edge.

    Screenshots

    All screenshots were taken on a retina (2dppx) device. If you’re reviewing screenshots on a non-retina display, check out this Cloudup gallery of 1x screenshots.

     
  • Matt Miklic 4:52 pm on July 13, 2010 Permalink
    Tags: design,   

    Made some minor style updates to the wporg web site today; changed the dark grey and light blue backgrounds to lighter shades of grey to better match the 3.0 style, as requested by Matt M. Replaced homepage screenshots with new ones from 3.0, as requested by Jane.

     
  • Jen 3:51 pm on April 25, 2009 Permalink
    Tags: design   

    There was some talk last night about may… 

    There was some talk last night about maybe doing a little design brushup on the admin header/nav. We only have a couple of days to decide on the design changes if we want to include it in 2.8. Would like to give community designers the opportunity to do a mockup (could give them a psd of the current style), but since they’d need to submit their design suggestions by Monday, and I’m nervous that there might be some backlash for the short/no notice. I mean, MT didn’t get any notice either, so it seems fair. It’s a pretty small design job… Jaquith did a quick mockup in 5 minutes. If anyone does take up the challenge, we can post the comps for a vote on Tuesday. What do people think?

     
  • Matt Mullenweg 8:21 am on November 21, 2008 Permalink
    Tags: design   

    New login page looks good. 

    New login page looks good.

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Skip to toolbar