
IBM Type - robin_reala
https://ibm.github.io/type/
======
seejamescode
Thanks for the love and critique. Issues are love too:
[https://github.com/ibm/type/issues/new](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](https://github.com/gatsbyjs/gatsby)

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

~~~
mjs
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.

~~~
seejamescode
Doooooooooone

------
natch
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.

~~~
sixothree
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.

~~~
nkristoffersen
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.

~~~
shurcooL
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](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.

~~~
goerz
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](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.

~~~
shurcooL
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](https://github.com/ibm/type#readme)

------
userbinator
_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.

~~~
sarreph
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-...](https://graphicdesign.stackexchange.com/questions/25356/why-
not-use-pure-black-000-and-pure-white-fff)

~~~
nradov
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.

~~~
tjohns
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. :)

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

------
iaml
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](https://i.imgur.com/Lsz19Zl.png)

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

------
ComputerGuru
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!

~~~
zeveb
> 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.

~~~
noir_lord
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.

------
mkj
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...](https://www-304.ibm.com/servers/resourcelink/svc00100.nsf/pages/zosv2r3ga321048/$file/e0zx100_v2r3.pdf)

~~~
GedByrne
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.

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

~~~
makmanalp
I'd gladly go back to this era:

[https://www.google.com/search?q=ibm+paul+rand&source=lnms&tb...](https://www.google.com/search?q=ibm+paul+rand&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjvtoCdsq_XAhXPciYKHb0qAnwQ_AUICigB&biw=1510&bih=805#imgrc=xW1Rb_i_tbbYCM):

~~~
whatusername
Did you see this earlier in the year:
[https://www.kickstarter.com/projects/496596810/reissue-of-
th...](https://www.kickstarter.com/projects/496596810/reissue-of-the-ibm-
graphic-standards-manual-by-pau)

~~~
makmanalp
You just made my day, thank you!

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

------
LoSboccacc
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

------
pgtan
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!

~~~
eps
Source?

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

~~~
pgtan
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](http://www.ibm.com)
Manufacturer: Bold Monday Vendor URL:
[http://www.boldmonday.com](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

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

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

~~~
sgift
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.

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

~~~
Bromskloss
Oh, that was IBM changing their design language.

~~~
mcguire
"I've Been Moved"

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

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

------
mrmondo
“... 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?

~~~
forapurpose
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.

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

~~~
fredley
[https://github.com/IBM/type/blob/master/LICENSE.md](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.

~~~
staticelf
Does this mean you can use it in commercial products?

~~~
fredley
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.

------
react_10234
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.

------
ricardobeat
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?

------
bringtheaction
> Oops!

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

Why not?

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

------
jarym
I must admit, it is a nice font!

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

~~~
ta834939874
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

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

------
jokoon
Not smooth enough at low resolution.

Sorry, consolas still undefeated.

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

------
maxsavin
I love how they used Helvetica for the content.

~~~
zichy
Does your browser support webfonts?

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

------
gmosx
Fantastic font and great page!

------
tumdum_
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

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

~~~
dewey
There's a good comparison between multiple png optimizers here:
[http://optipng.sourceforge.net/pngtech/optipng.html](http://optipng.sourceforge.net/pngtech/optipng.html)

> pngcrush by Glenn Randers-Pehrson, available at
> [http://pmt.sourceforge.net/pngcrush](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.

~~~
tumdum_
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.

~~~
keypusher
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.

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

------
Norther
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.

~~~
andyjohnson0
> 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.

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

~~~
phkahler
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.

~~~
madeofpalk
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.

