Hacker News Reader

Comment by VinzO | Hacker News Reader

Ironically, the trend of having page design with low contrast text as in this article is almost as annoying as the newsletter stuff.

View on HN

It's really hard for me to take UX people seriously that believe that such text style is okay. My eyesight is good but my eyes still get tired reading such thin font, even the "bold" text is too thin. I shouldn't have to turn on Reader Mode to be able to read your website.

Don't touch my browser font, font size (no arbitrary px, use rem/em with main text at least 1rem) and font weight. How hard is this?

In Firefox, you can go to Settings >> Fonts >> Advanced >> Untick "Allow pages to choose their own fonts, instead of your selections above", then you'll never have this problem again (though you sometimes will end up with others, such as icon-fonts not rendering as icons, and missing out on meta-discussions around poor font choices).

It's borderline unreadable (literally) on my Chromium browser: https://i.imgur.com/Y5QmTDn.png

Some designers miss on the readability front when it comes to weight (ie: textual color) for body text. Most sibling replies talk about background/foreground contrast but something doesn't need to be stark in that regard to be more easily read (which also affects whether people will continue reading something in the first place).

I brought this up years ago but there's a mid-century type design book that mentions a trend in the late 1800s of typefaces in print that were too thin, leading to complaints about readability. However it was in vogue so it lasted for a time.

I personally find the opposite and love low contrast colour schemes. High contrast (e.g. pure black on white) is much harder to read for me. Apparently this is common in dyslexic people. I guess everyone is different.

Are you aware of a contrast number above which it becomes uncomfortable?

As in this low contrast or just not maximal contrast?

After reading this comment I double-checked the website and, sure enough, there was five paragraphs of text I completely missed. My lizard brain saw the picture and format, interpreted it as a Tweet (I thought the title + picture was the content), and I completely dismissed the small grey text as something unimportant.

Immediately noticed the irony as well. Abysmal contrast on the text, also on the Resume page.

Extra painful given that the person is a UX researcher.

It's definitely a personal preference though. I find super high contrast very harsh part 2 certain point.that being said,for linked website and with very low contrast colour they used, I sure wish they opted for a heavier font.

font-family: worksans-extralight

color: rgb(41, 26,16) - osx's Digital Color Meter tells me the chip of this is #281A11

fuckin' illegible unless I hit command-+ like 3x, or activate reader mode

It also seems to be full of nbsp characters*, which create random extra space between some words.

* I'm not certain because I'm on mobile now and cannot easily check the source.

I just checked the source and it's not that. It's not a bad decision with regards to text justification as far as I can see, either. Might just be some broken kerning in the font it's serving up, this page is a dense thicket of machine-generated markup and I really do not want to investigate any further:

When a user moves their mouse from the middle of the page toward the navigation bar — presumably to abandon the page — there are technologies which can track this behavior and trigger a “mouse-out” alert. While this UX element (from companies such as Crazy Egg and Rooster) has great potential, I’ve found it far too common that websites use this to overlay huge pop-ups across the entire screen as a last-ditch effort to convert users.

what is this garbage, why does a paragraph need its text inside a span inside another span, what generated this trash?

ah, gotcha

You'll see that type of output from most WYSYWIG editors. Some are better than others and they've improved over time, but a lot are still garbage. Both Redactor and TinyMCE would have produced something like this at points in the past (been a while since I used them, so that may not be the case now). Pasting from MS Word will also produce some gnarly HTML in most editors.

It's actually random double spaces scattered in the text and "white-space: pre-wrap" CSS property.

In addition the page is doing something funny with links that defeats the peek behavior on iOS. I’m not sure what.

this is why I have downloadable or website fonts disabled and in browser, use a singular monospace bitmap font, unifont, and across the entire system. you can do this with your preferred font. also eliminates any risk of security due to font parsing issues.

Low contraxt text tires me. I tend to toggle Reader Mode in my browser or simply click on this bookmarklet (a bookmarked link with the below in the URL field) that changes all fonts to "Open Sans" or "Lucinda Grande". I can't remember where I found it but it's been one of the first things I add in a new desktop browser.

It must be urlencoded for bookmarklets to work.

  javascript:%20%20WebFontConfig%20%3D%20%7B%0D%0A%20%20%20%20google%3A%20%7B%20families%3A%20%5B%20'Open%2BSans%3A%3Alatin%2Cgreek-ext'%20%5D%20%7D%0D%0A%20%20%7D%3B%0D%0A%20%20(function()%20%7B%0D%0A%20%20%20%20var%20wf%20%3D%20document.createElement('script')%3B%0D%0A%20%20%20%20wf.src%20%3D%20('https%3A'%20%3D%3D%20document.location.protocol%20%3F%20'https'%20%3A%20'http')%20%2B%0D%0A%20%20%20%20%20%20'%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fwebfont%2F1%2Fwebfont.js'%3B%0D%0A%20%20%20%20wf.type%20%3D%20'text%2Fjavascript'%3B%0D%0A%20%20%20%20wf.async%20%3D%20'true'%3B%0D%0A%20%20%20%20document.getElementsByTagName(%22head%22)%5B0%5D.appendChild(wf)%3B%20%0D%0A%09var%20newSS%2C%20styles%3D'*%2Chtml%2Cbody%20%7B%20font-family%3A%20Open%20Sans%2C%20Lucida%20Grande%2Csans-serif%20!%20important%3B%7D'%3B%20%0D%0A%09if(document.createStyleSheet)%20%7B%20%0D%0A%09%09document.createStyleSheet(%22javascript%3A'%22%2Bstyles%2B%22'%22)%3B%20%0D%0A%09%7D%20%0D%0A%09else%20%7B%20%0D%0A%09%09newSS%3Ddocument.createElement('link')%3B%20%0D%0A%09%09newSS.rel%3D'stylesheet'%3B%20%0D%0A%09%09newSS.href%3D'data%3Atext%2Fcss%2C'%2Bescape(styles)%3B%20%0D%0A%09%09document.getElementsByTagName(%22head%22)%5B0%5D.appendChild(newSS)%3B%20%0D%0A%09%7D%20%09%0D%0A%20%20%7D)()%3B;

I'm also writing out the above in plaintext for reading through:

  javascript:  WebFontConfig = {
      google: { families: [ 'Open+Sans::latin,greek-ext' ] }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      document.getElementsByTagName("head")[0].appendChild(wf); 
   var newSS, styles='*,html,body { font-family: Open Sans, Lucida Grande,sans-serif ! important;}'; 
   if(document.createStyleSheet) { 
    document.createStyleSheet("javascript:'"+styles+"'"); 
   } 
   else { 
    newSS=document.createElement('link'); 
    newSS.rel='stylesheet'; 
    newSS.href='data:text/css,'+escape(styles); 
    document.getElementsByTagName("head")[0].appendChild(newSS); 
   }  
    })();;*

Reply on news.ycombinator.com