my 2 cents, the next big thing in web - is making it look like print. clean, spacious, grid based print.
anyway looking for type inspiration examples.... and typography reminders
im thinking the key to elegance is NOT having liquid body copy... body copy should have set width for good line length... i think it butchers readability to stretch body copy. think between 450px and 500px seems to be good... and text should never wrap around a body image or thumbnail, but stay columned... (dont know how to do this in drupal css... )
(remember to post that bike shop, had amazing use of times new roman uppercase... )
and this little note about off white and dark grey instead of black and white... from pretty good primer / reminder, good ref of css sizing of fonts.
The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.
also - font size 13px, line height 18px, p margin bottom 18pxis good.
reminder about fonts... surely it cant be true that windows dosn't have helvetica... cry... might be time to try the new windows fonts cambria, etc etc...
and a testing page and grid of whats installed in what
except- calibri here, tested against helvetica, its smaller x height, looks really different. the abovelink i noticed 'microsoft sans serif...' looks like arial..
survey of serif fonts for win/osx/linux, remember it good to include a unix font as cheap school computers might run linux etc... corbel, calibri etc are only rated at 50%... so for sans serif, microsoft sans serif is the go...
this site http://www.ars-informatica.ca/article.php?article=89 reccomends this font stack for arial/helvetica, includes the unix font too: (yuk, arial is preferrenced, why cant everyone get helvetica dammit..)
font-family: Arial, "Microsoft Sans Serif", Tahoma, "Nimbus Sans L", Helvetica, sans-serif;
and this for verdana based (more open letters, better at smaller sizes)
font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Geneva, "URW Gothic L", sans-serif;
it looks like corbel is useful for replacing verdana, and its much nicer looking, calibri is ok, guess its a nice change form arial, but using these means testing different typefaces on different systems... i dont want a mac and windows sseparate stylesheet, i cant use calibri because of the x height problem mentioned above.
or simply...
- The ‘wide’ sans serif stack: Verdana, Geneva, sans-serif
- The ‘narrow’ sans serif stack: Tahoma, Arial, Helvetica, sans-serif
heres a cool interactiv font stack builder...
helvetica/arial based stack, except i would not include calibri it is small than others. theres an explaination of this font stack here. http://articles.sitepoint.com/article/eight-definitive-font-stacks/3 personally, i think its too much, i already have to test my site for zooming, resolutions, oss, browsers, text resizing, if i throw in these font choices, then i need to also test for different combinations of font installations... each variation multiples the testing by itself. bar that, id reverse this list, except for a headline or something for a designer audience if it has a fancy headline with adobe fonts. i want to see each font in action on each o/s on my sites before i approve of its use.
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
verdana based stack. except i would delete corbel it is smaller.
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
this list at the bottom has a good examples of sans serif font stacks.
some sites on this list are using lucida, for body text. must check this out, never considered it.
MAJOR RESOURCE POOLS
this is really the source...
SANS SERIF SITES
i think this is my favourite body copy so far...
all...
"Helvetica Neue",Helvetica,Arial,sans-serif
and 471px wide body copy...
but think the size is going to be too small for the job im researching. shame. its really nice.
this body copy is good too...
unexpected body copy font stack... verdana??
Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial
but generally, type colour and line length good... 450px wide box...
sizing is probably the smallest i can get away with.
Font stack: “Helvetica Neue”, Helvetica, Arial, sans-serif;
just helvetica. (designers audience)
example of a lucida font stack for body copy.
just arial
i like this... lucida for body copy, helvetica for headings...
body copy... font-family:"lucida grande","lucida sans unicode",geneva,arial,sans-serif;
headings... font-family: helvetica,arial,sans-serif
(interesting the css property 'capitalise....' i hvant sen it before... good for cms's)
also like the block highlighting rollovers...
purely arial body copy but i quite like it, more condensed...
font-family:Arial,Helvetica,sans-serif
like this too... the r/ship of body copy and header / intro text... , although too small for my users. also really like the no nonsense clean sidenav.
everything..., font-family: Helvetica,Arial,Verdana,sans-serif
wow, just using font-family: sans serif! let the computer decide!! just have great type heirachy and leave the rest to whims of the o/s....
this does ok for 14px body copy... 570px ish column width, guess to incorporate the larger size... bit gappy though not that elegant.
er good.
all arial... except some lil italics in georgia... and some column headings they have done as a picture... especially liking the 12px all caps footer headings... good example of a 'nodes' type styling... and just black.
just nice type heirachy, small text (11px) is holding up well. good example of san-serifs being still good to use.
actual post width is 580px, 14px type isze.. i prefer the 12px excerpt size... actual post copy isnt that great.... but readable...
this site has mackin body copy, bit light though.
font-family: Arial,Helvetica,sans-serif
wtf, line height is set to normal... hmmm... font size 75%, no margin bottom. is it a fluke..??
i really dont get how they have differentiated the top page header from the blurb, they look like completely different thicknesses, but nothing fancy inthe css, just 10% larger... think im missing comething... its really minimal actually on the css... tricky... anyway heartening that arial can look ok, its going to be my entire font choice.
580px line length for the body copy area..
also, look at the news pages, good example of what to do if they sometimes add node images, sometimes not...
this is good too
its another ludica for body copy, helvetica neue for headings... 388px wide body copy, nice, narrow...
gotta find out if lucida is on pc and mac... it could be nice feeling change from all arial.. and looks great with helvetica headings.
a good reminder to notice, to get the headings looking sleek , not fat and ugly, they need font-weight-normal... otherwise they default to an ugly bold. also, i think verdanas bold is ugly, lucidas is much nicer... helveticas is a bit shitty too, at small sizes, arials is better.
actually, im hating on verdana for body copy now, too gappy... shit bold, only good for small footer text etc. sleek = arial, helvetica or lucida...
----
on a very side note, this is an awesome design test
Posts
