This is one of the most frustrating page navigation experiences I have had in long a while. I tend to scroll with pgup/pgdn or arrow keys (or more occasionally, space/shift+space) and when I got to the big "IBM" logo the page just kind of stopped. I thought that was all.
It wasn't until I came to this thread I realized there was more, and I should look again, but even then it took me forever to:
1. Realize I needed to put my hand on my mouse, hover the tiny, thin red line to get it to expand, and then use that to navigate.
2. Flip between pgup/pgdn and arrow keys. Sometimes one set worked, sometimes another did, and it would flip at random points in the experience.
Why on earth would you selectively enable and disable the browser's interaction with common navigation keys repeatedly in the span of a single page? I can understand blocking/swallowing one set if you intend to use it somewhere for something else (i.e. the text input sections), but flipping them on and off with no other use for those keys while they are blocked? It boggles the mind.
I always chuckle at seeing the "The damn page hijacked my back button/spacebar/Tab/cursor keys!" comments because even though they are technically right, they usually exaggerate the inconvenience. But goddamn this has to be one of the most frustrating websites from a huge company/vendor I've ever used, despite the very cool offering.
It actually was pretty straightforward on iOS Chrome mobile. On Desktop though -- WTF, users are supposed to eventually figure out how to activate the hidden menubar at the top? My first thought after mousewheeling to the giant IBM logo was that Chrome had crashed, because motion/interactivity had seemingly stopped so suddenly. Not since the Flash days have I seen a bespoke interactive web experience with such prominent navigation/UX confusion.
That said, when I figured out how to navigate, I enjoyed reading the narrative text, and I definitely plan on trying the font out in my next project.
In my company, I've often used an IBM created expense reporting tool as an example of how NOT to design UI :-) Looks like the mindset permeates the company.
This reminded me exactly of that Dropbox design page at dropbox.design - it was the exact same frustrating experience. If this is a trend please make it stop.
Perhaps something along the lines:
"Wow, look at that ugly page from Dropbox. My eyes hurt! Let's make ours even uglier!"
It's all about "Designer experience", not "User Experience" in this case (i.e. trying to be edgy for the sake of it, in order to impress your designer / PM peers)
For what it's worth, and setting aside opinions on the design itself, at least https://dropbox.design/ never steals focus or disables core navigation keys in frustrating, alternating ways.
I don't understand this comment. That page removes the ability to scroll via pageup/down, via arrow keys, via spacebar, and via a scroll-bar on the right (even when force-enabled via operating system settings). It appears that the only way to scroll is via mouse wheel. How is that not disabling core navigation in a frustrating way?
Doesn't that just mean your browser window didn't have focus? I can scroll on apps in the background with scroll wheel but not arrow keys, etc.. That's just an OS thing
If you scroll with your mouse, you can actually scroll past that IBM logo. It's an animation. After the logo, you get a nice huge button to the next section.
Oh wow, and it's even kind of a neat effect! Thanks for the tip.
Unfortunately it only works with the scroll wheel, or scroll events on a trackpad. It works finger-crampingly slow with my scroll wheel, about 15 full seconds of constant action, but I just found a laptop to try it on, and I think I finally got the effect they were going for with trackpad scroll effect. Much smoother and a neat effect. Spoiled a bit by my first, finger-cramping impression, but otherwise smooth enough that if I stumbled onto that experience first I might have thought nothing of it, or even been impressed.
Still see no reason for it not to responded to normal navigation keys.
I think you just need to get hip to the Web6.0 design patterns. This site is just the beginning of the next style revolution... that we really need to get in front of and stop quickly.
Fun related story: I once stumbled on a minor(ish) UI bug in IBMs PaaS dashboard and reported it via their contact form or whatever, even included an animated gif screen cap.
_five months later_, I got a reply asking to explain further. I couldn't even remember what the bug was.
Not to worry. It sucks on mobile too. The whole thing feels like a throwback designery Flash landing page. Took way too long to scroll before seeing full typeset paragraphs of the font.
On mobile the the UI is just as bizzare; random horizontal lines, the page jumps for no reason, touch/scroll randomly stops working. It's takes talent to make website UX so uncomfortable
From my experience dealing with IBM, I can only imagine this was the result of 5 different consulting teams, assisted by 3 different outsourced development groups, which was delayed numerous times, then Watson was added, and then a re-org caused by layoffs, which finally resulted in a website that couldn't scroll and caused the CPU of my high-end laptop to scream...
You missed the most important part; it was initiated by a team of lawyers who were tipped off by another team who noticed the Watson design team were using a typeface on public websites which they didn't have the copyright to, and certainly didn't have the license to redistribute.
You missed the part where IBM outsourced the work out to a team in China, which outsourced part of it to a team in the Phillipines, which outsourced part of it to a team in India, which copy-pasted some open-sourced typeface made by some guy in the US.
Also having worked at IBM in the 1990s, I can confirm that having corporate standards in place had little to do with what any individual team/department/division actually put on the public web sites. Pretty much the only bit that was controlled and monitored was the page header.
It sure looks like it was designed by committee. It is one of the ugliest typefaces I have ever seen and, having studied typography, I have seen some really shitty ones. What were they thinking with the f and r? This is Times New Roman all over again.
Clarification: Times New Roman was designed for the London Times newspaper in 1929.
Silly me, I... heh, the first time I ever saw TnR was in relation to MS Word. And so I read this sentence thinking first about screen resolution, then "but why would you print ads in your documents"...
It feels like there should be a 9-digit contract with a hapless government entity that stands no chance of actually getting the font they thought they were paying for.
...and as a result a $6B payroll project will be cancelled because the integrator was depending on IBM Plex being a drop-in replacement for Comic Sans Bold.
I'm impressed with the number of people who think that JS on most people's webpages is a good idea. Or that any JS was necessary to announce this font. It wasn't and wasn't carried off well here (nothing for the no-JS crowd).
A far easier page to write up and one that would have looked better could have been done with nothing but HTML, CSS (demonstrating the font in real-world usage even), and perhaps some PNGs to show bitmaps of the font (useful for those who, wisely, don't load every font the page says to load).
I've tried Plex but keep going back to Monaco. Somehow, my eyes grow weary faster with Plex. This may just be a function of my age, so your mileage may vary, but here's a listing of things that I think make Plex tiresome for coding:
1. The lower-case ell ("l") and number one ("1") look so similar that I need almost to squint to see the difference, if I'm tired.
2. Plex seems to distinguish between letters by small "inside" features, as opposed to "edge" features. What I mean can be seen by contrasting "a" and "g" in Plex and Monaco.
I think it's this second thing that tires my eyes. While I admit that the letters are clearer in Plex than in Monaco (e.g. there's no mistaking "a" for "o" in Plex), I find that tired eyes can get enough information from the outside shape to distinguish the features, and there is a higher comfort level in viewing the characters, without the extra high-wavenumber twists and turns of the "pen".
Again, I think a lot of this may just be that I have old and never-especially-great eyes. But I thought I'd mention these things, in case younger folks find their eyes growing tired and are wondering why.
Have you tried Iosevka? It's been my favorite code font for a while, mainly because it's so configurable (your #1 can be changed to your preference, and has a sane default), it's free and it's slightly narrowed which makes more code fit in the same space without sacrificing legibility.
A new typeface family of this scope doesn't come along very often. Sure, plenty of new fonts come out, but they contain mostly one to four styles (Roman/Oblique Normal/Bold) and have a special purpose. Two great examples are Matthew Carter's Bell Centennial (for phone book printing) and his Carter Sans (which I use for short chunks of copy).
Kris Holmes's and Chuck Bigelow's Lucida is one of the most recent comprehensive new type families, and that's from a generation ago. Other computer companies (Digital for example) helped support their effort.
So this is a big deal. It's a huge effort, and they made it open source and free. That's great. Thanks IBM, for supporting type designers. No doubt some of them are early in their careers. IBM's support has definitely given them a leg up. IBM will help us see another generation of new type.
It has decent ligatures ("fi" for example, look at the Slack desktop app's type to see what a ligature looks like). It only has one style of digits (figures, typeheads call them) rather than the choice of proportional and lining. But this is the 21st century and proportional figures are known as "old style".
It's no surprise the team wanted to make an artists' statement about their purposes and choices, and personally I found it (their web site) worth reading. It was a big nuisance to navigate, though.
I hope IBM can emerge from the cloud wars intact. It's gonna take focus. Unfortunately, a new typeface doesn't look like focus.
Typefaces of this quality and scope come along all the time. I don't really understand how it's a big deal. Take Source {Sans, Serif, Code) Pro, by Paul D. Hunt for Adobe (also open source); it's arguably a better typeface for user interfaces, and is a much better interpretation of Franklin Gothic and related Morris Fuller Benton gothics (as Plex claims in some areas.)
Also Apple's San Francisco, admittedly missing a serif variant, is a similarly broadly scoped project... of much higher quality.
Both of the above typefaces have fonts with character sets / glyph counts exceeding Plex: Plex Sans Regular - 663, Source Sans Pro Regular - 832, SF Pro Text Regular - 2439.
IBM Plex as an open source font is cool, however I think is of limited use to the broader design community... the formal qualities carried over from Paul Rand's IBM logo make it too idiosyncratic to use outside IBM products.
For IBM, I think it's awesome, especially considering it's replacing Helvetica.
Also, your terminology for figure styles is inaccurate. Proportional means of variable horizontal width (not monospaced), where the alternative is tabular figures (monospaced for tables). Old style figures can be either of the above, however their form is more like lowercase characters (an 'old style') that tend to work better in continuous text.
Any idea why they recommend TrueType over TrueType? Is that a general recommendation, or something specific to this typeface?
Edit: From BoldMonday's comment in issue 103: "TrueTypes can be - and in the case of IBM Plex are - specifically hinted for screen. OpenTypes with PostScript outlines are not able to do that."
FWIW: "Increasing resolutions and new approaches to screen rendering have reduced the requirement of extensive TrueType hinting. Apple's rendering approach on macOS ignores almost all the hints in a TrueType font, while Microsoft's ClearType ignores many hints, and according to Microsoft, works best with 'lightly hinted' fonts."[1]
Also, OTF is required for advanced typography features. Given that TrueType hinting is mostly ignored, OTF is generally a better choice.
Too bad the website is so poorly designed. It's actually a nice read through the design decisions. My first glance at the IBM serif made me think it was more of a slab serif like Stymie Bold but the discussion of its use in smaller sizes foes a nice job of explaining the differences.
There's a menu that you can click on at the top if you move your mouse/trackpad in the right way and that brings up additional pages. Whoever designed--and I use that word in the loosest possible sense--the pages needs some remedial web design school, as does anyone who approved it.
IBM has always served as a medium between mankind and machine.
Between the natural and the engineered.
The emotional and rational.
The classic and the cutting-edge.
Our most important job is to help humanity and technology move forward together.
IBM Plex™ brings these relationships to life through letterforms.
I was able to read this stuff by first pounding my knee with my fist, then biting so hard on my left hand I nearly lost some fingertips. But I made it through it. The challenging scrolling actually provided some additional and welcome distraction from the sheer horror of the words.
Being relevant? Their architectures and systems are quickly rising in popularity, their compiler is making great strides, and overall they're actively breaking into the HPC market, which they haven't been dominating in a very long time. I'd say they're extremely relevant, just perhaps not to your specific skillset.
Apple, Samsung, Netflix, now IBM... why does everyone need their own typeface? Is it to save on licensing fees? As a user, I don't really find these fonts very distinctive, so I don't associate them with their brands.
Especially with company with as many tentacles as IBM, having own typeface also helps ensure consistent design language across the company, both in terms of licensing (they can use it in any media/geography/field they need) and applicability (they can have all the variants etc needed).
Of course cost is also a major aspect. Random article claims that "Until recently, it [IBM] was spending over a million dollars each year to license Neue Helvetica for the company". With that sort of money you can afford to make your own fonts too.
While I'd agree that e.g. the Netflix font was somewhat non-remarkable/forgettable, I think they did manage to capture surprising amount of IBMness into Plex. I noticed it on their docs pages before they made big fuss about it, and really remarked to myself on how neat the font was.
Apple's always been focussed on design, in both marketing and UI. In marketing, for a long time everything was Apple Garamond, then Myriad. In the UI, Chicago and Geneva were heavy hitters. Now we have San Francisco. A key difference with this last one is that it's used in both the UI and in marketing.
Yeah, the various Garamond variants are classics (tracing their history all the way back to the 15th century!). Apple did commission a dedicated variant for themselves. Similarly, Apple used a Myriad variant, Myriad Apple. That said, my point wasn't that Apple only used Apple designed fonts (which isn't true), but that Apple has always focussed on design in general and typography in particular.
I think San Francisco and Roboto are distinctively Apple and Google respectively. I also think they matter more because they're system fonts on some of the biggest platforms (and maybe just because I happen to like them).
If I ever see this font again, I probably won't even know I'm looking at it.
The most offensively poorly-engineered page I've been to in years, all to promote Arial...Sorry, our totally original grotesque font inspired by Helvetica, don't steal!.
It's poorly engineered enough to keep you from getting to the part where they talk about Plex as a Helvetica alternative. :)
The Arial connection is that Arial has the same origin as a Helvetica alternative. It even shares similar differences to Helvetica, such as the construction of "C".
That web slide show was overdone IMO, but I'm a sucker for a code coding font and gave it a spin. Fired up three identical terminals with the same text, colors, and sizes, with respectively SF Mono, Source Code Pro, and now IBM Plex Mono [1].
My conclusion:
OMG, what has the world come to. It's 2018 and I have more great fonts at my disposal than I know to choose from. I could honestly live with any of them, but I'll stay Plex for a bit, if just for the beautiful 7.
[1] I do have other fine choices, like Inconsolata, Droid Mono, etc, but not enough time to try everything.
I first heard about this from the iA Writer blog[1], where they used Plex Mono for their own Duospace font. I've been using the font intermittently since then (I'm still somewhat of a Monaco fanboy on OS X), and I like it quite a lot.
Project manager for that site: "Hey need the most unusable website ever created, but with a modern feel. Bonuses of $1K for every anti pattern you can manage to incorporate"
In 2018 frontend development reached the point where multiple pages with a working scrollbar seems to be beyond our reach.
In the meantime the "glorious" IBM releases a free font, and this is newsworthy.
I think the Internet, while started out as something really promising, it's done for. Let it die, before it's too late, please. Someone, pull the plug, let's start over. Maybe the next one will be better, who knows.
At this point I'd wish HN would take a month off of new typefaces similar to the break from politics ;)
Really though, this is sort of a silly trend. Why does every tech company need to create their own typeface? Do they actually think anyone is going to care, or even notice?
There's a lot of people saying they hate the website, and I just want you all to remember this is exactly how many people feel when you chose to use thin light grey font on a bright white background.
I switched my editor default from Liberation Mono to this and it is almost the identical font. The only thing I don't like is the mono is not sans-serif so I'll stick with Liberation.
I Really like the style. I think the Google Font[0] page makes it much easier to see it in action. I hope someone makes a variant with coding ligatures. It appears that it does not support the polytonic Greek characters on OSX, though it shows Greek characters are in the set--not sure if that's a Mac thing or the font.
Looking at the character grid near the bottom of the page[0] you can see that they have created not one, not two, but three different ways to represent zero; empty middle, dot middle, slash middle. Is there any reason for this at all? How do you even select a particular glyph? Are they on a different codepage or something?
The f, l, and r hurt my eyes in a way I didn't know I could be hurt until now! There's something diabolical about that right angle and unnatural narrowing.
At first I liked it but then I saw the strange ß (german Eszett, ss can be used instead).
From https://en.wikipedia.org/wiki/%C3%9F I understand that that's the Antiqua form while nowadays the Sulzbacher form is used. But I don't know anything serious about typography.
I just recently actually read my copy of Computer Modern. Between that and the METAFONT books, it is amusing how little of this is new. And those books didn't claim to be groundbreaking.
Regardless, neat article. It is interesting to get into the weeds of typography. For anyone this introduced to the topic, dive in, it is a wonderful subject!
I'm actually using this font globally on my system (the sans-serif, monospace, and serif version), in Firefox, i3, terminal emulator, etc. They're great fonts, my favorite my far. They're just interesting enough to be a cool font, but not so interesting that things are difficult to read or look odd.
For what it's worth, the scrolling experience is way better on mobile. But I don't know how anyone could ever approve the desktop experience, it could easily be used as an example of what not to do with scrolling. It's the worst thing I have seen like this, personally.
I'm confused -- why does 't' have a single rounded corner at the cross stroke? 'f' doesn't have this feature and it doesn't seem very consistent with the rest of the font.
Fundamentally it comes down to style. Two practical reasons are:
- to more easily distinguish 't' from similar characters, such as 'f'. Particularly with monospace fonts, rigid adherence to rules can result in character confusion.
- to balance the foot of the 't' which extends to the right.
I nearly expected the website would be a disaster even before clicking. I was not disappointed. Lot of old school companies try to use some effect on their website just for the sake of it.
I love the font and the site, it worked well in chrome (android), except some glitch in the begining. Otherwise, the font is very interestingly and interactively presented.
Anyone else find these sort of sites annoying to navigate? How am I supposed to know how much I need to scroll down? Is the site broken or do I just need to scroll more?
Overall, I'm surprised it's taken IBM this long to put out a font.
I normally don't mind things like the NYT experimental pages, but this one is just egregious. When you get to the big IBM, nothing works but the scroll wheel for me.
I've never experienced a site where you can't scroll back up before. And then the navigation is a tiny strip of colour that's already closed so you have no signposting as to what the hell is going on? Kudos on the most counter intuitive website I have ever seen.
I can't even use the arrow keys, page up/down, or home/end to navigate with my keyboard. I hate the amount of noise I make scrolling through websites like this.
It wasn't until I came to this thread I realized there was more, and I should look again, but even then it took me forever to:
1. Realize I needed to put my hand on my mouse, hover the tiny, thin red line to get it to expand, and then use that to navigate.
2. Flip between pgup/pgdn and arrow keys. Sometimes one set worked, sometimes another did, and it would flip at random points in the experience.
Why on earth would you selectively enable and disable the browser's interaction with common navigation keys repeatedly in the span of a single page? I can understand blocking/swallowing one set if you intend to use it somewhere for something else (i.e. the text input sections), but flipping them on and off with no other use for those keys while they are blocked? It boggles the mind.