[agwa]

I have Firefox configured to force the same font face across all sites (I love the consistency this gives me, and also some some sites are extremely abusive in their font selection) so this doesn't work for me. The "icons" show up as unknown Unicode characters. Not cool.

This seems like the wrong approach - shouldn't characters have semantic meaning? It also doesn't seem accessible. Screen readers wouldn't know what to do with these invented characters. <img> tags at least have the alt attribute.

[agwa]

I've given it some thought and GitHub should be able to make this more accessible by doing something like this:

    <span class="mini-icon notifications"><span>Notifications</span></span>

Using media queries, serve CSS like this only to screen-like media (i.e. not screen readers):

    .mini-icon.create:before {
       content: "\f030";
    }
    .mini-icon span {
       display: none;
    }

Hopefully they'll adopt something like this, though it wouldn't help people like me who just want a consistent font across the Web.

[notJim]

I think screen readers actually respect display:none. I believe the preferred solution is to use a large, negative text-indent.

[agwa]

That's why you use media queries to set display: none only for non-screen readers.

Of course, screen readers might not respect that, in which your solution would work.

[LocalPCGuy]

I like this rather new solution, which actually works in older browsers including IE7 if you happen to need to support that. Still uses text-indent, but pushes it right instead of left and sets overflow hidden to hide it.

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...

[brcrth]

So you force a behavior through your browser but when it doesn't work you blame the site? Ok...

[lloeki]

Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them.

Hopefully the 'create' one uses f003, which apparently lies in PRIVATE_USE_AREA [0]

    .mini-icon.create::before {
       content: "\f003";
    }

[0] http://www.fileformat.info/info/unicode/char/f003/index.htm

[54mf]

All the icons lie in private use areas, specifically to avoid abuse.

[TazeTSchnitzel]

Abuse?

[chc]

As stated by the grandparent:

> Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them

[ori_b]

The alternative is having sites select fonts that hurt my eyes. I want a consistent experience across the web.

[huhtenberg]

That's like wanting all cars on the road to be red :)

[ori_b]

No. It's like expecting that when I adjust my seat to fit my leg length, the doors still work. I like the text to be readable without me leaning in and destroying my vision.

The fact that I'm forced to override font sizes for usability because sites don't respect my default settings is bad enough. When they break because of it, it becomes terrible design.

[Nitramp]

+1 on the font size - that's a big problem in particular if you happen to have a large screen.

But forcing everything into the same font seems a bit excessive; I've actually seen a couple of sites make really nice use of fonts, and you can still install an extension that turns your page into an "easy reading" mode on a key press.

What do you do about fixed width vs proportional fonts?

[thristian]

I'm not the original poster, but I also force my browser to render in a particular font (specifically, same font used in the rest of my desktop applications).

In my experience, I'd say about 0.5% of pages are fancy demos of things you can do with web-font support, 1% of pages use custom web-fonts but look just fine without them, and 0.1% of pages are like GitHub where they actually require a custom font. Everything else uses some "web safe" font, and often very little care is given to selecting which one. Forcing everything into the same font is an excellent solution for the 98.4% of sites that don't use custom fonts, and an decent solution for 99.4% of sites.

It should be noted that most of the "easy reading mode" extensions only work well for article-type pages, not for sites like Hacker News or Reddit.

[philh]

> forcing everything into the same font seems a bit excessive;

Worst case seems to be that you go to a site and it's not quite as pretty as it might be, but still perfectly readable. I'd take that in exchange for not having to press a button to make a site more readable.

Can you give examples of the sites you're thinking of?

edit - that should be "worst case provided sites aren't using fonts to display nonstandard icons".

[ori_b]

All browsers I've seen that allow you to override settings allow you to do it by family (sans, serif, fixed, etc)

[ianstormtaylor]

Sorry but seeing as Chrome remembers which sites you zoomed in on every time you go back to them, font-size isn't a good argument for completely changing the font on websites.

You have to click Cmd-+ once in a while to zoom in on pages that are made by idiots.

[Karn]

I agree wholeheartedly. I have a solution that I've been using for years - a stylesheet that overrides everything. I just got tired of having to adjust to different fonts and color schemes for each website. After years of using computers for 8+ hours a day I have settled on the perfect (for me) combination of color, contrast, font styles and sizes, button styles, link styles, etc., and that's what I want to see. If that's not enough I have a Scriptish script that formats any page to my specification with a keypress.

I actually think this is the future of browsing (at least for people who do a lot of reading in-browser). Books that used non-standard fonts and colors would be laughed at (say, Papyrus on a beige background for body text), but just because it's easy to go wild with websites doesn't mean people should do it.

[latortuga]

It's more like expecting all cars to be narrow enough to fit in lanes or expecting all cars to have turn signals and brake lights. Type face has a huge impact on how readable text is, car color has almost zero impact on my ability to drive.

[fusiongyro]

Fonts are not behavior. When the web was made of pages and style was secondary to content, this wasn't a problem.

[look_lookatme]

Welp, that's changed.

[maaku]

But should it have?

[smackfu]

The site uses a font choice to change how the site works, which is pretty much conflicting with the entire concept of a style sheet.

[vsl]

Err, yes, I do blame the site for abusing HTML. If they misuse text markup to represent what is semantically an image, how is that my fault? HTML has <img> for a reason. There's perfectly suitable markup for text and another for images: using the former for the latter is no less idiotic than doing it the other way around.

This fad is supremely annoying.

[gdubs]

So if, say, an older user forces all text to be large and it renders a site unreadable, you would blame the user?

[eps]

Why would an older user want to enlarge text only, and not the images and other page elements? He wouldn't. He would be using either Ctrl-+ in the browser or an OS-level zoom.

[vsl]

The first thing I enable in Safari is View->Zoom Text Only. Just because you prefer whole-page zoom doesn't mean the rest of us does too. I use zooming only when a page has unreadably small text size, in which case I enlarge it to be readable and do not want to scale up and uglify images that are usually perfectly fine in their original size.

[untog]

<img> tags at least have the alt attribute.

And <a> tags have the title attribute.

[agwa]

<img> has the title attribute too, but title is meant for displaying additional information via a tooltip. alt is for alternative text to be used in place of the image.

Does any screen reader actually read the value of a title attribute on a link containing text? I doubt it. Instead it would descend into the <a> tag and try to read the text therein.

[Nitramp]

Actually the title attribute is used to annoy users who have their mouse cursor on the page by displaying exactly the same text again that's already in the link or para.

At least in 90% of the cases I've seen it used, probably by some overzealous OCD person wanting to fill in _all_ the attributes.

[secoif]

If CSS and browsers weren't so broken and there was a convenient, semantic alternative, I'm sure github would have used that instead. Unfortunately icon fonts are one of the most convenient and compatible 'hacks' to render vector icons in the current climate.

In a perfect world you'd be right, or perhaps even in a world where IE hadn't held the entire Internet back 10 years.