Typebase.css: Simplified typography for the web | Hacker News Reader

Typebase.css: Simplified typography for the web

github.com

94 pointsas1ndu22 comments

It's a good start, but the solution is based on the default behavior of HTML/CSS, that is to position text in the middle of the leading. Text should sit on the baseline. There's a sass library that solves this problem nicely: https://github.com/designbyjake/sassline

Works even better with Tim Brown's modular scale library: http://www.modularscale.com/

Now THAT is how you do it. I have been looking for something like this for a while now, thanks for sharing.

Here's the demo of sassline's sexiness: https://demo.sassline.com/

What is the purpose of the specimen sheet? Is that the same thing as a demo? It looks like a huge typographical mess to me http://devinhunt.github.io/typebase.css/demo/specimen.html, but maybe it has another technical purpose?

Yes it is basically a demo. Specimen and Specimen Sheet are common terms in typography. The author is trying to display how type looks in a grid on this page, though I agree the horizontal grid looks messy.

The point of a baseline grid in design is to relate elements sitting next to one another - say a picture sitting in a flow of text should hit the baseline of the text and perhaps x-height at the top, or a heading sitting in a column beside another col of text sits on the same baseline. This system doesn't provide that and there are many typographic crimes on this page:

Many head sizes are smaller than main text.

Heads do not sit with the paragraphs they belong to but float in a huge canyons of space - this is basic typography.

Heads mix fonts in the same heading - OK for raygun maybe, not ok for normal use.

Text cols overlap at many widths, and main text is allowed to be too short and too wide.

There's a grid, but nothing sits on it or relates to it (baseline, x-height, cap-height etc). If a grid is shown it should be a baseline grid, and text should be locked to it at least in some cases, somewhere on the page. Looks like the grid is off.

The blurb talks about 'vertical rhythm', but the styles don't display this - instead the two columns are unrelated and jarring - the only thing aligning is the main copy, but that means of course that heads have those awful gaps above and below - a nasty tradeoff which isn't worth it.

The whole specimen is a mess. I get what he's aiming for, but a specimen should be clear and concise. This one isn't, and makes figuring out what you're looking at a lot more jarring than it should be.

Thats why its open source. you can fork a copy improve on it and then send a pull request.

I realize H5 and H6 aren't used that much, but the sizes for these elements are absurdly small for me. I cannot even read them. Perhaps consider a minimum font size as the size of paragraph text and stop going with smaller text and consider some other way of styling (e.g. replace bold with italics or regular weight).

That demo is a really bad representation of whatever this is:

http://i.imgur.com/6tUIx5U.png (Chrome, Windows)

Those gridlines make a mess of the page and those headings at h5 and h6 look horrible.

It's even worse in a test env (PhantomJS, Linux):

http://i.imgur.com/7n3nOKz.png

If you want to truly customize the way you use preprocessors for typography in your web projects, here's another approach: https://scotch.io/tutorials/aesthetic-sass-3-typography-and-...

Interesting that the demo page is using one of those super thin fonts my eyes have trouble focusing on and reading.

http://devinhunt.github.io/typebase.css/

PS: I'm on a retina MBP in 1680 mode so your results (and eyes) will vary

It's probably -webkit-font-smoothing's fault. Source Sans Pro Light is quite readable.

He's using -webkit-font-smoothing: antialiased; With this sort of font it looks terribad. You see this way to often. I've been guilty of it by proxy when another dev comes in and applies this style to the <body>

There was a time in the 19th century where thin, spindly fonts where in vogue for printed books. They were later criticized by typographers and general readers for making books harder to read [1].

The web is experiencing a similar scenario where thin typefaces are being used for body type as it looks modern even though it's making body text less easy on the eyes. In small paragraphs I personally don't mind it, but many sites are now using it for long articles where it's not ideal.

[1] Daniel Updike's 'Printing Types, Their History, Forms, And Use; A Study In Survivals' is a great read.

Volume 1: https://archive.org/details/printingtypesthe01updi Volume 2: https://archive.org/details/printingtypesthe02updi

Everything old is modern again. Cool links. I spent weeks fighting (and mostly losing) to a designer that wanted every website to use no more than a 300 font weight and no italics or other differentiating typography, all because it was "modern and light and airy". Wish I could have been like "Nope, here's people in the 19th century complaining about it" back at that point.

Cool, typography on the web can always be improved. Another cool one to check out is https://github.com/corysimmons/typographic.

Just looked up typographic and the author made this come by at the end:

"If you like this project then I encourage you to check out a few of my other projects that go well with Typographic.

Lost Grid - Quite simply the best grid out there in every comparison available. Simple yet incredibly powerful."

Following a quick read LOST Grid seems very comprehensive, anyone have experience using this?

Here's another typography generation tool I wrote. Highly configurable. http://kyleamathews.github.io/typography.js/#/

You can see a number of pre-built configurations in this issue https://github.com/KyleAMathews/typography.js/issues/10

This is really well done. Very useful for my future projects.

Are you also considering adding a simple grid system to the generated css (maybe bootstrap grid)? That what this generates a complete framework that looks like I configure it. Cheers

I've been using this as the basis for my typographic styles for maybe a year now. My only problem with it has been the spacing between paragraphs and headings. I find myself using the .hug class a lot.

what of https://github.com/corysimmons/typographic have u used it?

Haven't tried it. I don't think I would as its a SASS project and I prefer LESS. My initial thought just upon glancing the readme was that it seems a bit bloated. Starts out with some great options then it looks like they've defined variables for every system don't imaginable. I like typebase because it's a very complete base that you can customize and build on without having to tear apart. Typographic seems more framework-y which is a turnoff for me.

But that's just a first impression and my needs and preferences aren't everyone else's.

Reply on news.ycombinator.com