Nice work!

[1] - http://motherfuckingwebsite.com/

[2] - http://bettermotherfuckingwebsite.com/

For my website[3] 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[4]. A header image and a custom font does have a big effect on how personal the content ends up though.

[1] - http://motherfuckingwebsite.com/

[2] - http://bettermotherfuckingwebsite.com/

[3] - https://hugotunius.se

[4] - http://idlewords.com/talks/website_obesity.htm

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.

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.

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!

Why not make it into multiple web pages?

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

/rant

-- edit to be less inflammatory.

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!

https://github.com/kyleamathews/typography.js http://kyleamathews.github.io/typography.js/

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.

Here is a good example from my website [1]. 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.

[0] https://imgur.com/a/Qs6dJ [1] https://imgur.com/a/ij1uI

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.

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?

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

[0] - http://webaim.org/resources/contrastchecker/?fcolor=555&bcol...

[1] - http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...

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 :)

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.

You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves [0]. 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.

[0] http://i.imgur.com/HSocAdt.png

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.

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.

So that more people can spread word about how low contrast/less readable text hinder accessiblity.

Actually one could do it with pure css using ::target, but that would scroll the page back to the top every time.

Your site looks great!

Also I really like your personal site. The design is beautiful.