Text-First Design

[00:00:00]
>> Jason Pamental: At the heart of designing from the content out, is thinking about what is the smallest element of content. And for a text side, or a media side of some kind, that's a paragraph. I actually spent quite a bit of time a few years ago, I had written a talk that was really just about the history of the paragraph.

[00:00:22]
And just kinda went through the Evolution of it as a concept, and an execution over the last couple thousand years. And it was really kind of interesting to see, even going back to how a paragraph indicator would have been represented in Greek, in Ancient Greek. Not modern Greek, but in Ancient Greek, you can represent that in CSS today.

[00:00:44]
So it's actually kind of amazing how much you can do with that atom of content. So in this page, we've got a few different things going on. We've got maximum width, we have an initial cap. We also have some ligatures going on. We've got proper quotation marks that are being enforced, we've got the Ink Script in the underlining for the link there.

[00:01:06]
And there's a few things further down in that sample page, but I've really tried to kind of carry through as many of these different techniques, as applied to the paragraph, and then kind of build out from there. And you kinda focus in on some of those details. You can see how that ligature comes together.

[00:01:29]
We also have things like making sure there's proper hyphenation, the section dividers, the initial bold line of the first line of a paragraph. Did anybody know that there's actually a real pseudo selector in CSS to select the first line of any element? I mean, that's really, it's useful, and it's a nice technique.

[00:01:51]
So any paragraph you could say, first of type, first line, and it will do, you style it however you like. First of type, first letter will get you the first letter. Now, initial letter is a selector that is coming, it's only implemented in one browser so far. So it's a little hard to hang your hat on that, it will be much better, but we can use first of type, first letter, and get that same possibility.

[00:02:21]
And so, getting at all those details, adding those things, layering them on one after another, is what's going to really take things to that next level. So let's take a look at some of those details in the CSS for some of these pages we've been looking at.