However, if you run Chrome's Accessibility Audit (https://chrome.google.com/webstore/detail/accessibility-deve...) on this page, you get warnings about low contrast for 100+ elements and a link to https://github.com/GoogleChrome/accessibility-developer-tool....
So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.
As someone with less than perfect vision, I've seen far too many websites embrace the "greyness" in design, employing far too light shades of grey to display their main content.
This is especially evident if using an older monitor with a TN panel. While IPS monitors have become affordable in the last 2-3 years, there was a period of time when they carried a hefty premium, so most consumers are still probably stuck with at least 1 TN panel in their home.
I cannot describe a user experience of reading a low contrast web page on a TN panel as anything but horrible and have had to manually override CSS rules to be able to process the content.
Most designers work exclusively on Macs and they are not even aware of the issue.
In particular, very thin fonts look well on Macs while they look like absolute garbage under Windows (to the point where some serifs are plainly not displayed so you can't recognize the letters).
I also think that certain "gray on gray" combinations on average have higher contrast on Mac displays than on non-Macs.
It has always been my deep understanding that the artist is trying to communicate within a constrained space. Without knowing the bounds of this space an artist is truly lost. By constraining, however, the artist is able to focus, form and foster a microcosmos.
The modern web designer is rarely an artist. Web design entails extending of bounds more often than focusing them. Selling out instead of focusing and selling paradigms.
... penny for every time I heard a developer say something stupid about their own field.
Just because you're not aware of 1 thing, doesn't mean you shouldn't be called a designer anymore. Just so you're aware, your horse is high as a kite.
I don't even know why we have the TrueType font standard anymore, if not a goddamn platform on Earth even bothered to render them remotely the same.
You know how hard it is to find a code font you like, when it doesn't even look the same from platform to platform? I've actually given up and gone so far as using old bitmap fonts from the 16-bit era, because at least I can trust those to look the same, in theory. Sometimes even then the Mac's ludicriously overzealous font smoothing will render them unintelligible.
I am impressed at the quality of the Mac's rendering but man alive, it's so extreme sometimes that it's tempting to call any font running on a Mac a derivative work.
The flipside of course is that if you're on any kind of Linux, even getting your font rendering to something like palatable can be all manner of obnoxious, not least because it will even vary from software to software. Tweak the system fonts all you want, it'll do fuck all when your browser decides to just completely override and ignore the system font rendering for it's own, usually uglier, ideas.
This is why designers give up and just design for the Mac. Because ultimately, they want things to look good, and trying to make things look both good, and consistent, on everything, is an intractable nightmare.
Have you tried Infinality on Linux?
FTFY. Seriously, if you do all your design work on a particular piece of display hardware and actually are unaware that things tend to display differently on different hardware and in different environments then yes, hand over your "designer" title, please.
I used to have colleagues like that. I didn't tell them this quite as bluntly (because, colleagues) but oh did I wish I could. Have some pride in your work, please. Now this was in the time that "responsive" was not yet a thing (and we were happy when IE7 came out hahaha finally PNG transparency :p).
But today? What is responsive design if not a fundamental awareness that your site is going to look different on different types of hardware? How can a designer get away with such ignorance today?
An outstanding example of the annoyances this causes is the website of my local tram operator. Here's a screenshot on my notebook: https://twitter.com/stefanmajewsky/status/536948106366304256 -- If you want to compare the rendering on your machine: http://www.dvb.de
Also what has this to do with Retina? I always assumed Retina is just a resolution thing, right? But the screenshots are the same resolution.
Retina does effect screenshots. I use Dropshare and it actually has an option to downscale Retina screenshots to a 'normal' resolution
That said, great presentation and a lot of great advice in this submission.
So that more people can spread word about how low contrast/less readable text hinder accessiblity.
- "No contrast" means that there is no striking difference.
- "High contrast" means that the difference is highly striking.
I agree that "low contrast" also makes sense, but I still think "no contrast" is a better fit.
Visual contrast is measured on a spectrum that starts at zero and goes up from there - a box of a particular color inside a box of the same color would have no contrast, but if there is any difference in the color values then there is at least some visual contrast.
Wikipedia isn't a great source for definitions, but has a reasonably thorough take on this https://en.wikipedia.org/wiki/Contrast_(vision), going into the details of contrast sensitivity, which deals with almost-imperceptible levels of contrast.
But do you know what else was hard to read?
The code blocks themselves. Because of the syntax highlighting and pastel colours, I had to focus quite a bit to see any of the actual code. It got better with a few more lights on in the room, but someone with below average vision would likely struggle to read much of this page.
But after that step the tutorial redefined the text color to #566b78, which is even lighter. I understand that the blue shade is a nice touch, but decreasing the legibility of the text so much is not.
Besides these nitpicks, the article is great though :)
> So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black.
 - http://webaim.org/resources/contrastchecker/?fcolor=555&bcol...
 - http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...
If I find an article with #000 (or for example... HN comments) I can't sit and read them all at once, I have to go through them in bits and pieces and give me eyes a rest.
So if I want to be able to play games tweaked for this wide spectrum, and read text, I either just can't, or have to hope websites use grey-on-grey.
#000 is as dark as your screen is when the screen is turned off, which is not the darkest color that you can perceive. And if at any point it is uncomfortable to look your screen because it is blindingly bright, then the screen brightness is set too high.
White on Black (or Black on White) are generally bad. I prefer the low contrast in my example: http://codepen.io/anon/pen/ZORWRv
Though even the "medium contrast" is much easier on my eyes than default.
So yes there are some people who will have issues reading what is proposed, there are other people who have a hard time reading what you are proposing.
While it is reasonable to argue whether #555 is the exact right level or not, the point is you need you need to make the contrast less harsh than black on white. Otherwise its just fugly.
I checked the site and it's absolutely lovely, I was all ready to jump at the occasion and share this link to all my friends who ask me about "design tips" some times (I got a decade of experience on them so I intuit and spot things that are "off" but often it's first this 4 minute stuff that needs fixed), and when he got to the text #555 bit I was like "NOOOOOOOOOOO now I have to send this to all my friends with the caveat 'but please ignore the text #555 bit'" (which will get lost somewhere and we'll end up with more bad contrast sites).
I can say a bit more about this, but since the site is all about "do this!" (no reasoning given) I'll first just say: "don't do that!" :)
The claim that black text is harsh on the eyes is a similarly unfounded-yet-oft-repeated "Designer Wisdom" like that Golden Ratio shit--it's also similar in the way that it's not per se wrong to use it, but like bbq-sauce on pizza/sex, only if you know wtf you're doing, not something to apply willy-nilly without clue or cleverness.
And it's IMHO slightly worse than the Golden Ratio because 1. the Golden Ratio doesn't hurt and 2. the Golden Ratio thing sounds sciencey but is hard to experimentally confirm or refute while anybody can see that black on any screen was never really black to begin with so what are you on about in the first place "never use pure black" (as a designer, I WISH I could use pure black, but we can't, scientists told me only a black hole is really pure black, and you can't paint with those because they're bad for the environment or something), it's a really arbitrary distinction.
As for "don't use pure black", I do that, but the most important rule of design remains:
You have got to know the rules before you break the rules!
And the rule is black on white. Which you can't achieve. So practice on that first. Then you can break it and ask yourself "why am I breaking it?". Personally what I like to do is use a very dark colour like #321 or I don't know, #114 maybe. This way, on a high quality bright and contrast-rich monitor the people with medium-good eyesight get a slightly coloured tone in the blacks that you can use to match the other colours, warm it up, cool it down etc. And for everybody else, it looks like black! I usually do the same for white. And if you use something like redshift (or Flux) it gets all messed up any way, but if you place your blacks/whites slightly off minimum/maximum and you do it in harmony with the other colours, then a transformation like redshift will also leave a lot of that colour harmony in tact. So that's a good reason not to use pure black or pure white. However, upping your blacks all the way to #555, will get a lot of use out of the non-linearities in the blackbody-radiation that redshift emulates and it'll mess up the colours.
Also #555 is 33%! Post-gamma, even! You just threw away one-third of your dynamic range for what reason? Say somethingcontrastsomethingsomething again, I double-dare you. Again, learn to use contrast first, before you decide to get rid of it because you've heard somethingsomething somewhere.
Otherwise, wow this site is absolutely lovely!! :D Let me not understate that!
#0f0a01 for black
#fbfbfb for white
For my website I'm really trying to keep weight on the wire down too so I am opting to skip the custom font and header image. It's quite nice to have 10-15kb pages in the age of the web obesity crises. A header image and a custom font does have a big effect on how personal the content ends up though.
 - http://motherfuckingwebsite.com/
 - http://bettermotherfuckingwebsite.com/
 - https://hugotunius.se
 - http://idlewords.com/talks/website_obesity.htm
Also I really like your personal site. The design is beautiful.
Your site looks great!
I actually recently got rid of GA because I didn't want to have to add JS to implement a cookie banner to comply with EU regulations.
I got rid of GA because Cloudflare provides some analytics and that's enough for me.
I particularly like the simple links at the top, but found the list of articles confusing - it took a while for me to realise that the articles weren't just one paragraph filler texts.
I couldn't think of a good solution so didn't give one, sorry.
CSS is a very low-level language for expressing design intent. It's great if you want to set the background color but if you say: "I'd like to add white space to my typography" — it could take dozens of recalculations + css changes to test your idea.
Typography.js's goal is to create the most elegant/powerful API possible for defining your site's typography and remove a lot of the tedium/difficulty around experimenting with your design.
Would love feedback / help!
That being said, the core engine is quite solid and the themes are ready to be used.
No, it doesn't. The low contrast text is definitely harder to read in direct comparison with black. This is the point where I suspected that the page might be a parody of modern web design. Unfortunately it seems to be serious.
The syntax highlighting is similarly awful and the grey background makes it even worse.
Yes, sometimes it's a different font, but usually a better looking default. Helvetica looks hideous on windows, which is why it's often "Helvetica Neue", Arial, sans-serif... that said, just use sans-serif unless you want a specific font (with webfont option).
-- edit to be less inflammatory.
You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves . Which is even better! For the small group that don't force their font choices by default yet change their default font settings, it is better to use serif/sans-serif instead of specifying a font family to respect the user's choices.
I force my font choices to be used everywhere, so any CSS that specifies a font-family is just mild bloat on the CSS file in the end. I understand people like to take into consideration the font choices for their design, but it really should be in the user's hands without having to jump through hoops.
Here is a good example from my website . Note how "use" and "mu" have the same height. It is not perfect, but matching cap height as well is maybe impossible without buying fonts.
This is when you design in the browser with the medium in mind.
Problem is when someone gives you a PSD made by someone who badly ripped off someone else website with no idea about what the box model actually is, asking you to make a 1:1 replica in the browser.
Oh, and of course it should work on mobile too!
I agree with this 100%.
What I don't understand is why many developers argue that this principle does not apply to code and that we shouldn't have line length limits "because it's not 1970 and we have large monitors." If long lines of prose is difficult to parse, then long lines of code are even more cumbersome to parse, especially when you are either 1) slowed down by having to scroll horizontally all the time or 2) distracted by the awkward naive line wrapping done by the editor.
Why not make it into multiple web pages?
Actually one could do it with pure css using ::target, but that would scroll the page back to the top every time.
The way I see it... You can just share the URL. And if you're the type of person that frequently shares content, presumably you'd use a browser plugin of some sort, just so you can get a consistent experience across sites.
Simple self hosted share links that were just links would be reasonable, but it seems not many take that route.
Phones and tablets are already a book-like viewport. Desktop browsers are a different matter, for these presumed reasons:
- most monitors in 2016 have lots of pixels along the X axis
- most browsers are maximised or run in full-screen mode
Joe Designer also has lots of pixels and/or a maximised browser, hence squashes content into a column.
Some do it wrong, which means some websites end up looking like a thin column of text on your cinema display.
What I'm getting at is this: I run my desktop browsers already in a book-like viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple resize-with-trackpad when I don't) so I'm a few keystrokes away from having to parse long lines of text. I don't really like it when website authors choose my viewport width on my behalf.
Choosing your own typefaces and colours - fine. Layout? Not so much. What do others think?
1. The back button doesn't undo the changes. Abstractly, clicking on a link performs some navigation which the back button is supposed to reverse. That doesn't work here.
2. Fragment links don't work. http://jgthms.com/web-design-in-4-minutes/#centering should take me to the 3rd step. Instead it just dumps me on the first step.
I made my own due to some very unusual choices. For example, publishing a post is done by adding a line to a collection file. Posts not in there are considered drafts.
Don't add any unecessary weight. If your content (not SPA, not "web 2.0," CONTENT, the stuff that actually makes up most of the web) takes longer to load than HN, you're doing it wrong. Thankfully, this site seems to understand that.
As for colors, just leave them the user's default, set black on white, or use Solarized or another high-contrast theme.
I'm not sure if this was intended or just a bug with IE though.
Nice intro to web design. I love the simple presentation.
Just like black bars when the aspect ratio of a movie doesn't match that of my monitor increase the appeal of said movie.
I find margins on mobile pages a complete waste of horizontal space. My device screen is only 6cm wide and already surrounded by plenty of space in my field of vision. Why make it even narrower?
Random example: Frank Chimero's site renders with Times New Roman body text on my Mac, since I don't have Minion Pro or Calluna which are prioritized before Times in the stylesheet, and it looks lovely.
I wish there was a similar simple demo showing how to style mobile apps.
Thanks for the write up, with CSS I never know where to start, this helps to think about it.
Changing font color mid way was a mistake, it's breaking too many discreet conventions, sfart with the grey and it will be much easier for the user.
First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is preferable (and using the courier/monospaced font).
Second sans-serif. I understand the history - serifs are delicate and look clunky on <200 dpi screens. But as we move to widespread retina displays, isn't the old lesson of typography, namely that serifs help legibility and convey an image of "seriousness", about to make a comeback? Some will argue about the legibility point, but even from a styling standpoint, aren't we getting just a little bit tired of helvetica and its brethren everywhere?
Bootstrap template #581