
Typebase.css: Simplified typography for the web - as1ndu
https://github.com/devinhunt/typebase.css
======
cristianpascu
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](https://github.com/designbyjake/sassline)

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

~~~
smpetrey
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/](https://demo.sassline.com/)

------
chrisseaton
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](http://devinhunt.github.io/typebase.css/demo/specimen.html),
but maybe it has another technical purpose?

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

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

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

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

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

[http://i.imgur.com/6tUIx5U.png](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](http://i.imgur.com/7n3nOKz.png)

------
davidkpiano
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-...](https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-
rhythm)

------
greggman
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/](http://devinhunt.github.io/typebase.css/)

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

~~~
Springtime
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](https://archive.org/details/printingtypesthe01updi)
Volume 2:
[https://archive.org/details/printingtypesthe02updi](https://archive.org/details/printingtypesthe02updi)

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

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

~~~
evolve2k
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?

------
kylemathews
Here's another typography generation tool I wrote. Highly configurable.
[http://kyleamathews.github.io/typography.js/#/](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](https://github.com/KyleAMathews/typography.js/issues/10)

~~~
anilgulecha
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

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

~~~
as1ndu
what of
[https://github.com/corysimmons/typographic](https://github.com/corysimmons/typographic)
have u used it?

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

