Hacker News new | comments | show | ask | jobs | submit login
IBM Type (ibm.github.io)
326 points by robin_reala 8 months ago | hide | past | web | favorite | 121 comments



Thanks for the love and critique. Issues are love too: https://github.com/ibm/type/issues/new

Some things to keep in mind:

— v1 will not be released until early next year. We published publicly so it is easy for teams to test and give feedback.

— The documentation site was a quickfix and will merge into a silky smooth GatsbyJS site later. Give that project some love at https://github.com/gatsbyjs/gatsby

— We are constantly making breaking changes until v1 based on font-loading performance, design specs, and more


Given the comments here, you might want to call out more clearly that this is not the stable/final release of either the font or website to set expectations, etc.


Doooooooooone


Nice typeface. But I'm a bit confused.

The title on Github (and here) say "IBM Type."

But what is IBM Type? It's never explained. Instead the site leads off with an explanation of typography. Then it introduces a specific type. It never tells us what "IBM Type" encompasses or if it is a project, a group, a new thing, and old thing, a software package, a consulting service... etc... yes it says some revisions are coming, and it will be out of beta soon, but what is it?

This is again another project without a proper introduction. All too common on Github and other OSS sites.

That being said, the teaching examples on typography embedded in the document are great.


This is why I am so sad to see CodePlex going away. Something about Github seems to encourage this practice of terse project descriptions. Maybe it's the fact that the code view is the default view as opposed to the wiki being the default view.


Isn't README.md the default view? If so, I'd assume you can include as much info about that project as you like in there.


Sort of. The default view is the root directory listing, followed by the README. If your root directory happens to contain many files, the README will be below the fold.

E.g., look at https://github.com/camlistore/go4. Unless your monitor height is 1600 px and you're using 90% browser zoom, you might not even see the README until you scroll down.


That's why I tend to link to the anchor of the README title, if I can, e.g. https://github.com/ibm/type#ibm-type Something I picked up from @jsvine, who pointed out that when they open-source their data stuff from BuzzFeed, it makes it much more accessible for the general public when the first thing they see is not the code view.


Yeah, me too.

You can also link to #readme, which is a generic tag at the very top of the README and is guaranteed to exist in every github repo. E.g.:

https://github.com/ibm/type#readme


I was assuming "IBM type" was typefaces from IBM typewriters/printers back in the day.


Never use pure black (Hex value: #000000) for text, but instead, a range of grays.

This irritates me greatly. I can understand somewhat the justification against pure white (a poor attempt at compensating for monitors being set by default to insane levels of brightness), but pure black? It doesn't make sense to reduce contrast this way.


It's never an absolute, but for a similar justification to the you've given for white — it creates too much contrast, and is therefore most often (especially in print and on bright displays), uncomfortable to look at: "[Pure] black and white create the highest contrast possible".[0]

HN's body text is actually pure black (as far as I can tell) and works alright because it's on an orange/grey background, but if you play around with black text on a white background, you should find that a few HEX notches above #000 (say #333, for example) is much more pleasant to look at.

The abstinence of pure black doesn't irritate me, but taking design advice from IBM does :)

[0] - https://graphicdesign.stackexchange.com/questions/25356/why-...


> HN's body text is actually pure black (as far as I can tell) and works alright because it's on an orange/grey background, but if you play around with black text on a white background, you should find that a few HEX notches above #000 (say #333, for example) is much more pleasant to look at.

And I immediately tried that. My impression: it miiight be pleasant to look at, subjectively; but it's harder to read, which is the actual purpose of text (most of the time).


Pure black and white don't create too much contrast. I'd like to see some actual research if anyone claims that it does. And there is a contrast button on every monitor to turn it down.


I agree. I’d rather put it like this: Pure black/white most easily shows if your display brightness is currently set obnoxiously high.

Pure B&W on high brightness is awesome out in broad daylight but of course terrible indoors with lights off and the same display settings.

But is that the fault of the colors?


Anecdotally, I find pure black + pure white rather uncomfortable to look at for any long period of time. (Pure white especially, but the combination of the two is particularly bad.)

It wasn't always that way, maybe something to do with my current eyeglass prescription, or just fatigue from staring at monitors all day? I don't know.

But regardless, one of the things I've learned about UI design is not to dismiss other people's concerns about text readability. Just because you have great eyes (for now), doesn't mean everyone else does too. :)


It's better that people that are bothered by white backgrounds dial down the background light on the monitor. Saves energy too!


I don’t have numbers for you, but I do have a theory on why it makes sense. Monitor contrast has been going up for years to provide better photo and video quality. The screens I used in the 90’s couldn’t do black, only a dark shade of gray. In order to achieve the same apparent level of contrast as 20 years ago, you have to use dark gray text. People who’ve been around a while will instinctively do this to achieve an outcome that feels right, and those are the people who produce these guidelines.


>The abstinence of pure black doesn't irritate me, but taking design advice from IBM does :)

It sounds vaguely like an appeal to authority suggesting that IBM is not in a position to give advice. Can you expand on that?


It's not an 'appeal to authority', just a hint that I'm reluctant to take design advice from IBM.

Why? As many other HNers have pointed out, the site that the font is being showcased on is hardly the pinnacle of good web design.


Printing websites with grey text on a laser printer usually gives you dithered and unpleasant to read text.


This should be solved with CSS media queries, e.g.

  @media print { ... }


Whenever I put any of those fancy grayish sites side to side with a printed magazine, the ink on the paper is more black and the paper is more white than what I see on the screen. No wonder paper is easier to read. Then I open the developer tools, set color to black and background to white and the screen is as readable as the paper. It seems that they are missing some basic usability tests.


Paper is always easier to read because the white on your paper doesn't _glow_.

Reflected vs. emitted light.


I'm not convinced that's still a relevant distinction. Looking at the OLED screen on an iPhone X, for example, it can be hard to visually tell the difference between screen and paper.


Still, not everyone is on an OLED screen. Especially on desktops.


Sure, but a good LCD panel is still a lot closer to paper than any CRT ever way. At the lowest level, the state equations of photons don't include a "reflected" versus "emitted" term.


But light diffusion is a common part of analysing what an eye sees. Paper has a much larger scattering effect, whereas something backed by a light does not.


My impression is that grey text sort of looks better on Retina screens. I haven't looked attentively at such screens for more than a quarter of an hour in the past so I wouldn't know. My belief is that most "designers" (whatever that is...) don't look at their creations after letting them go out into the wilderness.

I sometimes imagine making a "designer" read through a long HTML book set in 20pt #ddd-on-#fff Raleway with the lowest weight possible, on a crappy full-brighness laptop screen. He'd be bound to a chair with his eyed forced open and his direction fixed. Maybe then he'd learn to not torment people's eyes.


Professional designers don't care about anything other than the latest Mac hardware. This has been true since the 1990s.


That's because professional designers are neither professional nor designers. How many of that folk actually have had any sorf of education at all on related topics? Graphic design is as old as civilisation and knowing how to do font-family colon Raleway and a bit more doesn't make you a designer. But somehow it gets you jobs, it seems to me.


An art professor instructed me that black pigment paint was to be avoided as it makes the image look flat. Rather, a black-like colour is to be built in layers of darkening shades. I could see this applying to graphic layout with multiple colours, but I'm not sure if it fits for printed type.


> I'm not sure if it fits for printed type.

No, there is no contrast issue with printed type. The problems with displays isn't their high contrast but overall poor ergonomics and usually completely moronic default brightnesses.


I think you might be refering to the changes in object colors due to ambient light. A gray object outside probably has a dark blue shadow. This can apply somewhat to typography, as the color you choose for type should be related to the colors around it.


Frankly, I'm not convinced I should be taking design advice from people who made this landing page. In some parts the page looks borderline broken [0].

[0] https://i.imgur.com/Lsz19Zl.png


They aren't dispensing HTML/CSS slicing advice though, are they?


I was thinking the same about that and when the navigation goes over the video. I feel like making the z-index of the video player higher would've been fine, at least the navigation wouldn't be hovering over it.


Design != writing CSS.


I love the attention to detail in the document, lots of thought has clearly been given to legibility and structure. It's a great read regardless of which font you ultimately use.

I do question the 75 characters per line, though - is it just me or can that be a tad too short for body text if a larger font size set the width somewhere?

Also, on a funny note: the very last image of the page shows a sample of IBM Plex Mono... And uses "fancy" ldquo/rdquo in code. Clearly not enough developers were consulted in drafting this document!


> I do question the 75 characters per line, though - is it just me or can that be a tad too short for body text if a larger font size set the width somewhere?

What concerns me is that they suggest 38% of the viewport width, wasting 62% of my screen.

For almost twenty years I used a browser window at half my screen width, with a console or other application in the other half. That's no longer possible, due to the number of sites which assume that browser windows are always full screen.

I like a 72-character width; I just don't want scads of wasted space on either side of those characters.


I love Firefox's reader mode for that reason, it just makes all that rubbish go away and it's improved a lot over time, it works without any issues on about 95% of the long form content I read.

Which reminds me I need to figure out if I can make it the default view for some sites.


Aaw, I guess this means IBM PDF manuals will lose their distinctive look. "IBM-Bodoni" font I guess for the title?

https://www-304.ibm.com/servers/resourcelink/svc00100.nsf/pa...


I think this is all about establishing a new distinctive look.

The current one screams “1990” at anybody reading.

Now they need something that is distinctly IBM while gently whispering “2020” into the readers ear.


How about something that proudly states "1970"? That would be cool!




You just made my day, thank you!


I can see echoes of Bodoni in IBM Plex Serif. Bodoni looks way classier though, and imho doesn't look dated at all.


Wait for their marketing department to call this Watson Type...


I don't like that much the I serifs on the sans serif version. I prefer much when ambiguity with l is resolved trough cornering the l, like in Ubuntu or Source Sans Pro.

The rest seems quite nice, even if the chosen letter spacing feels a little weird


It's a licensed font from Blue Monday. No cyrillic, no greek, not to mention polytonic greek. And they took the true small caps out of the fonts ...

MISC FIXED forever!


Source?

And did you mean Bold Monday? The ones who made the mono font for iA Writer?


yes, Bold Monday, sorry for the mistake

fonts/ibm $ otfinfo -i IBMPlexSans-Regular.ttf Family: IBM Plex Sans Subfamily: Regular Full name: IBM Plex Sans PostScript name: IBMPlexSans Version: Version 1.000 Unique ID: 1.000;IBM ;IBMPlexSans Designer: Mike Abbink, Bold Monday Designer URL: http://www.ibm.com Manufacturer: Bold Monday Vendor URL: http://www.boldmonday.com Trademark: IBM Plex™ is a trademark of IBM Corp., registered in many jurisdictions worldwide. Copyright: © 2017 IBM Corp. All rights reserved. Sample text: How razorback-jumping frogs can level six piqued gymnasts! Vendor ID: IBM


Mike Abbink shows up as Creative Director at IBM, in addition to being at Bold Monday.


It took a couple of seconds for the letters to stop jumping around and changing weights for me.


I think that's because your connection took a bit to load the webfont, so the page was first rendered in one font, then rerendered, when the preferred font was loaded.


Sure, but it actually changed 2 times, so some intermediate font was loaded in between.


Oh, that was IBM changing their design language.


"I've Been Moved"


I'll give the monospaced one a try in the terminal and see how it goes.


I've been using the mono in my code editor for a while and it's a delight.


`r` is a little weird with its wide flat top, otherwise it's a great font. Would love to see Greek and Cyrillic support too.


“... to reflect our brand and our design principles”

Out of interest - What does IBM’s brand mean to you? (Serious question)

By that, I think I mean - what does IBM make you think of and what emotions does it instil in you when considering the company and brand?


Deep, solid expertise and resources, highly professional standards, and a deeply rigid bureaucracy. The latter make accomplishing anything so difficult that it's not worth trying unless you are a customer/partner with influence and unless a big payoff makes it the high cost in time and frustration worthwhile. I avoid buying IBM for that reason - I did recently, because I had little choice, and nothing has changed since the last time I became their customer.

IME, the overwhelming response I get from IBM employees to a problem is they tell me about their bureaucratic rules, with no flexibility, and not about solutions to my problem. It's like dealing with a computer algorithm: They follow very specific pre-written instructions, and cannot and will not deal with anything the programmer didn't specifically anticipate. They don't care that a problem exists or needs to be solved; they care only about following their algorithm. And the bureaucracy is so large and complex that they don't know who can solve the problem. When training customer-facing employees, I use IBM as an example of what not to do - it's your job is to solve the customer's problem, not the customer's, and your job is not to follow a procedure; procedures are tools, not outcomes.

I'm not blaming IBM's employees by the way; clearly that's a management and organizational problem. When I deal with people at organizations like that, I try to have sympathy - I only have to deal with these frustrations on the occasions I interact with their company; they have to do it all day, every day. They can't bend the rules and go out of their way to help every customer.

As long as I'm going on about this: IMHO it also deprives IBM the benefits of human intelligence - dealing with novel situation, innovating and solving problems, etc. Perhaps IBM's view of human work explains, to a some degree, their concept of AI that can replace people.


Quality. Professional. Nostalgia. Conservative.


What's the license? Is this purely an internal IBM font?


https://github.com/IBM/type/blob/master/LICENSE.md

> Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"

> This Font Software is licensed under the SIL Open Font License, Version 1.1.


Wow, at least they included a license this time. I desperately tried years ago to get the license for the fonts shipped with the Symphony Suite, but in vain. No files, no declaration in the fonts, no answer from the IBM support.


Does this mean you can use it in commercial products?


Yes. As far as I can tell (IANAL): you can do anything except sell it directly (unmodified), modify it in any way and sell/distribute it under the name Plex, or redistribute it (modified or unmodified) under any other licence.


Yes, but you're not allowed to sell the font "by itself."

https://wiki.debian.org/DFSGLicenses#The_Open_Font_License



Font is fine but the UI examples are horrible for the content they're supposed to show. Most look completely unusable. I hope BlueMix doesn't adopt this.


I tried to replicate the formula for the type scale and it took a bit more effort than expected. This is what I got:

    var scale = (n) => n ? scale(n-1) + Math.ceil((n-2) / 4) * 2 : 12;
    [...Array(16).keys()].map(n => scale(n+2));
Looks like the ⌊floor⌋ should actually be ⌈ceil⌉ and it only works by starting from offset 2 (base value repeats 3x in the sequence). Am I mistaken, or is the formula wrong?


> Oops!

> Bold, Medium, Text, Extralight and Thin should not be used in websites.

Why not?


I can't answer for the heavier weights, but lighter font weights can look dreadful on low PPI displays (e.g, desktop computers).


Legibility? Just speculating, but websites get used in more diverse ways than most media; books do not need to look good across every screen size from 3 to 300 inches. So it's probably wiser to be more conservative.


Maybe they have decided to limit the choices to just enough for the web in order to limit the download size of a typical landing page? There are too many websites out there that pull complete weight ranges of multiple webfonts.


Because a committee at IBM said so.

That said, the Bold is very, very heavy, and the Thin is very, very light. But I see nothing wrong with the Sans in Medium (taking the place of bold, usually), the Text (it's not bad) and the Extralight (if you really need that, which you probably don't.)

I also see that they banned #0 black text, presumably because they are elite. That's why all my browsers have Reader extensions now.


I must admit, it is a nice font!


I kept reading thinking it must be more than a font, but nope. Just a font. A nice font.


it's a font and a design language. These documents are very useful when trying to teach 100,000+ people how to properly use a font


it's very IBM, the UI mock ups in particular looked very usable, no one would be fired for using this font...


I thought it looked like a decent system font for an OS.


Not smooth enough at low resolution.

Sorry, consolas still undefeated.


Nice font, but it just looks out of focus to me.


I love how they used Helvetica for the content.


Does your browser support webfonts?

      font-family: ibm-plex-sans,'Helvetica Neue',Arial,sans-serif;


Fantastic font and great page!


Great page, it only took 13s to load. With no wonder when it takes 13.8 MB. And the biggest png files are not even pngcrushed...

du -ch editorial-1.png editorial-3.png product-1.png product- 2.png product-3.png product-4.png 2,5M editorial-1.png 832K editorial-3.png 368K product-1.png 288K product-2.png 284K product-3.png 1,2M product-4.png 5,4M total

vs pngcrushed:

du -ch editorial-1.smaller.png editorial-3.smaller.png product-1.smaller.png product-2.smaller.png product-3.smaller.png product-4.smaller.png 2,0M editorial-1.smaller.png 612K editorial-3.smaller.png 188K product-1.smaller.png 192K product-2.smaller.png 184K product-3.smaller.png 876K product-4.smaller.png 4,0M total


It also looked messed up on mobile - the nav bar took up 20% of the screen. Definitely a point in favour of the motherfuckingwebsite.com school of thought.


I remember websites. I miss them dearly.


Pepperridge Farm remembers


Motherfuckingreat style guide! Thanks for the laugh - for which partially the wording is responsible and partially it‘s the hopelessness of a „so true, but it will unlikely ever change towards the better“...


I just heard of pngcrush for the first time. I usually use optipng. Any insight which is better?


There's a good comparison between multiple png optimizers here: http://optipng.sourceforge.net/pngtech/optipng.html

> pngcrush by Glenn Randers-Pehrson, available at http://pmt.sourceforge.net/pngcrush, is an open-source program that iterates over PNG filters and zlib (Deflate) parameters, compresses the image repeatedly using each parameter configuration, and chooses the configuration that yields the smallest compressed (IDAT) output. At the user's option, the program can explore few (below 10) or many (a brute-force traversal over more than 100) configurations. The method of selecting the parameters for "few" trials is particularly effective, and the use of a brute-force traversal is generally not recommended.

In addition, pngcrush offers a multitude of extra features, such as recovery of erroneous PNG files (e.g. files containing bad CRCs), and chunk-level editing of PNG meta-data.


In the end it does not matter since they did not use any of them. If I can reduce size of that page in 2 minutes, without any webdev background and using the only tool I could remember if few seconds than there is something seriously wrong with the way they treat visitors.


maybe they aren't familiar with this tool. perhaps you could email them and suggest it to them, and then they would improve their site.


https://pngquant.org is worth looking at as well. It's lossy, so not for every image, but the size reduction is often dramatic.


I realise this doesn't answer your question, but there's a nice macOS GUI with multiple crushers built-in:

https://imageoptim.com/


Also take a look at ImageAlpha - https://pngmini.com/ - great for single images (happy fan of both!).


About the same. But, I found this little benchmark: [0]

[0] http://pointlessramblings.com/posts/pngquant_vs_pngcrush_vs_...


I used to hear good things about Ken Silverman's PNGOUT but not recently.


They actually have a message in the footer that says “Leave us an issue.” Ha.

https://github.com/ibm/type/issues/new


>And the biggest png files are not even pngcrushed...

Makes sense (that they are not) if the difference is just ~20% as in here.


In nearly every subfield of computing, along nearly every metric, most people would kill for a 20% improvement.

A processor 20% faster would dominate the market for years. A new compression algorithm that was 20% smaller would be either copied or used by every archiving system. And yes, a website reduced by 20% is significant.


>In nearly every subfield of computing, along nearly every metric, most people would kill for a 20% improvement

I doubt it. 20% is not even worth to turn a straightforward algorithm to a more complex and convoluted (but more performant) one, or to switch backend technology, or db store, etc.

As for a "20% faster processor"? Big deal, I was raised in an era when we got 2x faster processors every 2 years.

(Besides, we do have processors that are 20% faster than others, and they don't "dominate" the market, even at the same price range some might go for perceived quality stability -- e.g Intel vs AMD, over the small speed increase).

>And yes, a website reduced by 20% is significant.

To whom? It's as if people never heard of opportunity cost.

Just go measure how many websites, even leading ones, go to any great measure to reduce such bloat, and you'll find that it's not that significant in the real world. Up to a point, of which 20% is not even close, you can be bloated without punishment in the modern web.


If you use the correct tools, such optimizations introduce little complexity, if any. Just add a gulp plugin or select "optimize assets" in your Netlify panel or something similar.

If not using the correct tools, simply you won't survive for long in the market. Probabely you can still manage to sell domains or such, but can't compete in innovation-based sections.


What a load of bullshit. Imagine getting paid to "work" on this for months.


While interesting, is this really necessary? Call me skeptical, but value add = negligible, justification for an entire department to spend several months+ working = likely.

I can see why companies like Apple and Microsoft would want to be involved in making fonts, they make their bread and butter by creating warm-fuzzies and having a consistent design language; IBM though, less so?

Genuinely interested to hear others thoughts.


> IBM though, less so?

Why would IBM not also benefit from a consistent design language? Irrespective of what people might think of their products, they are involved in a wide range of business sectors (services, desktop, mainframe, AI, etc.) and I would have thought that consistent typography would help to give them a more integrated feel.

Sure there is an element of "me to" about this - Google, MS, Apple, even Oracle and Atlassian have design languages - but as someone with a general interest in typography I thought this looked pretty good.


You can have a consistent design language without creating your own font though.


Yeah, I think web sites that insist on having their own fonts are being a bit narcissistic. The user should have the fonts that are pleasing to their eyes installed and their browser should use them. Web sites insisting they know better have too many people doing design. Go ahead and cut that cost, we won't notice.


No, I highly disagree. There's nothing narcissistic about wanting to choose the fonts for your site.

Of course wanting to create your own font is another level, but there's nothing wrong about wanting to choose the font on your site.


IBM is a large company (380K headcount) with a design staff. They produce A LOT of textual material for clients that are paying serious piles of money.

Typography is a fickle, subtle thing that can influence people without them being aware of it. While on HN, folks may pretend to prefer stark naked HTML, that doesn't fly with the general public.

IBM decided it needed a refresh in that area. Good for them and good for the graphic design professionals that did the rather impressive work here.


stark naked html doesn't necessarily imply ugly default styles. think of it as attempting to achieve perfection in fashion through doing as much as possible with as little as possible.


IBM's last corporate typeface was a slightly modified version of Helvetica, which wasn't particularly distinctive and didn't see much adoption internally.

Plex was introduced a few weeks ago internally with considerable uptake. Intranet articles and corporate comms look much nicer now :P

IBM also produced the Carbon Design System which influences most of their product offerings (most notably on IBM Cloud/Bluemix) http://carbondesignsystem.com/


Airports comission their own fonts and so do cities, car manufacturers and banks. Typically they are proprietary and might even have an exclusive license because they are considered to be part of the corporate identity.


I think when you're as big as IBM, you also need to have random people doing random stuff here and there, as who knows when you'd need something special unexpectedly or when you might suddenly have a hot product unexpectedly. As well, it's helpful to have random teams working on silly projects or even toys if only to keep people's minds fresh and flexible. If we're only always thinking about the value add, won't we become like the stock market analysts that only care about share price and end up giving advice only focused on the short-term? Of course too much waste is too much. But what's a small project here and there, especially if there are zero legal issues in a place like IBM where so much stuff has an "only built here" sentiment; I can't for the life of me imagine why IBM insisted on using Lotus Notes when I was there. I knew very few people who liked it.


There's this wonderful book, "Corporate Culture & Performance" by John P. Kotter - the biggest take-away for me was that companies under stress to perform will generally cargo-cult their behavior from successful times.

IBM building its own fonts to polish the nooks and crannies of their brand identity may well be such an instance where it is replicating behavior from the late 70's and early 80's of doing everything under the sun. Imho it should clearly not be a priority for them right now.


I think it’s more like the design equivalent of open source software. It’s meant for internal use but then “open sourced”, there may be a trend, I’m not sure.

https://atlassian.design




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: