

Typeplate - A Typography Template - Brajeshwar
http://typeplate.com/

======
abcd_f
Tangentially related -

The demo page is a representative case of the "designer font-size" setting. I
get exactly 4 lines of text on the first pageful. Not everyone surfs on Retina
displays or humongous iMac panels at 1080 vertical resolution. As much as I
appreciate being able to admire individual glyph curves up close and personal,
it comes at the expense of being actually read the page without constant
scrolling.

~~~
tikhonj
I personally like this far more than the usual bias towards fonts that are too
small. It looks better and is far easier to read. Moreover, even on a pretty
bad 1280x1024 display and in a non-maximized window, I see both of the top
paragraphs as well as part of the downloads--enough to know to scroll.

For whatever reason, most sites seem to err on having fonts that are far too
small. I would much rather they err on having fonts too large, and I do not
think this particular page erred at all.

Perhaps it doesn't work well on a cell phone or tablet, but it works perfectly
fine on any even moderately modern laptop or desktop.

As an aside, I really love the GitHub and Twitter icons. Most sites have icons
that don't quite match each other or the overall design; these icons match
both all the while being very simple and elegant.

~~~
FuzzyDunlop
They're referring to the actual demo page: <http://typeplate.com/demo.html>

------
lowboy
> Just like in print, don’t use the darkest black available in your body text
> (#000). Instead, go for something softer, like #444. You can use a slightly
> darker color for titles (#222).

I've always found the opposite; because headings are typically larger, they
benefit from a lighter colour than the body copy.

~~~
etrinh
I was also confused by this line. Thick blocks of color appear darker than
thin blocks, so a heading would need to be slightly lighter in order to appear
the same color as the body copy.

~~~
adrianhoward
It depends whether appearing the same colour is one of your goals. Contrast
with the body text is one of the things you sometimes want to emphasise.

------
Trezoid
Please don't use #444 for body copy. Anything lighter then about #222 (which
typeplate has used throughout their own site) is just too low contrast on
light backgrounds.

~~~
ctidd
That's a completely false generalization. Brighter than #666 will lean into
the danger zone for some readers, but #444 is safe for most type, although
very slightly light in perception. In any case, the ideal type color is
dependent on the weight of your text.

~~~
adlpz
In my opinion, the recommendation of not going above #222 is not because it's
illegible _per se_ (that would depend on font weight indeed), but because you
have to take into account external uncertainties like poorly calibrated
displays, ambient light, bad backlights, etc.

Better be safe and go with a darker text.

~~~
Silhouette
_Better be safe and go with a darker text._

But darker text isn't necessarily safer, because having too much contrast is
also a bad idea. That is why these guidelines about not using pure black or
pure white get passed around so much in the first place.

~~~
jellicle
The idea of "too much contrast" is a very recent invention with very little
support behind it. People like high-contrast reading. It's easy to read. As
contrast goes up, reading rate goes up. There are hundreds of studies to that
effect.

Only dumb-ass designers have asserted that grey-text-on-grey-backgrounds is in
any way a good thing, and they are wrong. (At least as far as conveying
information goes.)

~~~
Silhouette
_As contrast goes up, reading rate goes up. There are hundreds of studies to
that effect._

As someone who does read a lot of research about design and usability issues,
I am always sceptical of people who write things like "There are hundreds of
studies to that effect" yet don't cite a single one. If it were really as
simple as you claim, we would all be reading white or yellow text on black
screens and no-one would get headaches because their monitor was set too
bright.

If you really do believe in looking at empirical data, you might like to read
some of the research into how excessive contrast can exacerbate negative
conditions, such as the "shaking" effect seen particularly by dyslexics or the
"halo" effect seen particularly by older readers.

------
ajanuary
If you're demonstrating or introducing a CSS library/tool, I'd recommend not
minifying the CSS on the page.

A few places I inspected the elements to see how it was working in the real
world - i.e. this site - and it's a bit of a pain to work out which bit of
line 29 a particular rule is on.

------
acabal
Nice resource, but I disagree about indenting paragraphs in web copy. I've
found that for me, I'm more comfortable with narrow paragraphs spacing and
traditional indentation in print media; but web media just reads more smoothly
with wider paragraphs spacing and no indentation. Indenting web copy stands
out, but in the wrong way I think.

~~~
ollysb
Yeah, they don't look great with a ragged right edge. With justified text the
structure would be far clearer.

~~~
delinka
I'd bet that a reason the first line indent was invented was as a space-saving
method of indicating new paragraphs. Do we skip a whole line and waste paper,
or ... ? "I know! We can put a bit of extra space before the first word of the
next paragraph!"

Such things are not required in digital media where each reader might have
completely different spaces for text to render within. And, ideally, the
content and its formatting are structured in such a way as to allow the user
to apply their own formatting if desired.

warning & disclaimer: post may contain factually incorrect guesses and
suppositions of the author; no information herein should be considered
accurate or factual; use at your own risk

~~~
radio4fan
I was once told by a typesetter that paragraphs have always been separated by
indenting the first line.

Then along came Microsoft Word, which inserted vertical space between
paragraphs instead. Now most people think it's supposed to be that way.

I have no citation for this, but have noticed that novels in print use
indentation rather than spacing.

~~~
nsfmc
this is not _strictly_ true, but it is a postwar convention that was
popularized by Penguin books [1] and its 'composition rules' which were
canonized by jan tschichold. The more common 'tradition', which Typeplate
ignores, is that you indent only if you do not insert vertical space between
lines. The idea being that you only need to do one visual 'thing' to make a
block of text distinct from another, why do two?

the earlier tradition was that you'd add a pilcrow or some other distinctive
mark at the start of a logical paragraph mid-line so that as little paper
(which was either baby cow parchment or made of precious linen) was wasted on
whitespace. For an example, look at a 42 line bible [2] or eric gill's book on
typography [3].

[1]: [http://www.thenewgraphic.com/2012/06/jan-tschichold-
penguin-...](http://www.thenewgraphic.com/2012/06/jan-tschichold-penguin-
composition-rules/) [2]:
[http://www.hrc.utexas.edu/exhibitions/permanent/gutenbergbib...](http://www.hrc.utexas.edu/exhibitions/permanent/gutenbergbible/pages/#top)
[3]: [http://www.olivertomas.com/books/eric-gills-an-essay-on-
typo...](http://www.olivertomas.com/books/eric-gills-an-essay-on-
typography-1936/)

------
thristian
A while ago I wanted to make a stylesheet I could use when formatting Markdown
documents for online viewing, as a replacement for the terrible backwards-
compatible defaults web-browsers use. The stylesheet I came up with (
<http://gitorious.org/typesetter-css/> ) , doesn't have all the fancy extra
class features that Typeplate does, but it makes a pretty decent job of
rendering semantic HTML5, like this:

[http://zork.net/~st/jottings/How_to_limit_the_length_of_your...](http://zork.net/~st/jottings/How_to_limit_the_length_of_your_bash_prompt.html)

~~~
mimiflynn
I was hoping something would mention semantics. Seems like a lot of new
frameworks still require you to modify pre-existing HTML.

------
ivan_ah
Very good ressource: SASS code examples for many standard things you might
want to do with text.

------
etrinh
This seems like a great starting point for anyone who is interested in
designing a website with a strong emphasis on text content (think blogs,
online magazines, etc). If you've ever tried to formally study typography, it
can be pretty overwhelming. I'm a web developer with an interest in design,
and type is one of those things that seems simple until you realize you have
to understand it intimately at multiple abstraction levels (individual
letterforms, lines, and blocks of text). Glad to see there's a resource out
there that uses typography best practices and makes them sensible defaults.

~~~
tikhonj
Can you recommend any good overviews of the subject? I'm not a designer, but
I've always been very interested in typography.

~~~
charliepark
The best book I know on the topic is Robert Bringhurst's _The Elements of
Typographic Style_. Highly, highly recommended.

Other great books: Ellen Lupton's _Thinking With Type_ and James Felici's _The
Complete Manual of Typography_. Both are really solid.

Books that would be worth checking out at a library: Richard Hendel's _On Book
Design_ and Ruari McLean's _Typographers on Type_. More philosophical in
nature, less practical.

------
aw3c2
The font size is much too huge (and bold) for my standard displays. I prefer
sites that use 100% font-size.

Can somebody shed light on the recent trend for huge font sizes? Not guesses
and anecdotes but some research?

~~~
driverdan
Screen resolutions have increased over time which makes on screen fonts
smaller (assuming unchanged OS DPI). Beyond that I agree it'd be nice to see
some real data here.

------
cpr
It's pretty horrible typographically and visually to combine paragraph
indentation with extra space-above. Use one or the other. (Personally, I
prefer indentation, which also saves vertical space.)

------
designpeter
love the mixins!

The margins up and down the headings don't seem to be consistent though. For
the big ones they are much too small, for the small ones way too big (when
combined with paragraphs). Also, if they are below

's, margins above the heading are larger than below (big sin in typography). I
don't know if margins are defined somewhere in Typeplate, maybe that'd be an
issue to solve.

I also don't quite understand the way, font-sizes and scales are
measured/calculated. It would be nice if you could document that so designers
without extensive coding skills are able to understand and change that system
to their needs. Are all font-sizes based on em? Is there any simple way to
change the default font-size? Changes on the variables don't seem to have an
effect for me..

Besides those (for me) issues this is really great stuff, thanks for sharing!

------
tcdowney
Very nice. I'm definitely weak on the typography front and this looks like
something that I may actually use!

------
pseingatl
Could you use the css file for epubs?

------
shaurz
What language is that?

------
johnx123-up
Any LESS version?

