5 ms·

Typebase.css: Simplified typography for the web

94 points by as1ndu 11y ago

jdmaurer 11y ago
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 11y ago
  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?
bpatrianakos 11y ago
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 11y ago
  what of https://github.com/corysimmons/typographic https://github.com/corysimmons/typographic have u used it?
  - bpatrianakos 11y ago
    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.
greggman 11y ago
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
- teamhappy 11y ago
  It's probably -webkit-font-smoothing's fault. Source Sans Pro Light is quite readable.
- captainill 11y ago
  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>
- Springtime 11y ago
  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 11y ago
    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.
cristianpascu 11y ago
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 11y ago
  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/
memco 11y ago
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).
chrisseaton 11y ago
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 11y ago
  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.
  - grey-area 11y ago
    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.
  - Bluestrike2 11y ago
    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.
nacs 11y ago
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 11y ago
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-vertical-rhythm https://scotch.io/tutorials/aesthetic-sass-3-typography-and-...
kylemathews 11y ago
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 11y ago
  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

94 points by as1ndu 11y ago

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 11y ago
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?

bpatrianakos 11y ago

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 11y ago
what of https://github.com/corysimmons/typographic https://github.com/corysimmons/typographic have u used it?
- bpatrianakos 11y ago
  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.

greggman 11y ago

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

teamhappy 11y ago
It's probably -webkit-font-smoothing's fault. Source Sans Pro Light is quite readable.
captainill 11y ago
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>
Springtime 11y ago
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 11y ago
  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.

cristianpascu 11y ago

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 11y ago
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/

memco 11y ago

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

chrisseaton 11y ago

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 11y ago
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.
- grey-area 11y ago
  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.
- Bluestrike2 11y ago
  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.

nacs 11y ago

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 11y ago

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

kylemathews 11y ago

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 11y ago
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