is it just me or is it hard to find a fully sans serif website these days? everyone has jumped on the serif is ok as a headline trend like a rash... and serif does look nice, but it think it still looks too classic and antiquated for some brands.
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...
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
JQuery Supersized
Posts
@Tor, Aaron Bassett
Setting a background for an html tag (thus, forcing the browser to calculate the width and height of the html element) will cause the body tag to be rendered as div and *not* fill the browser window’s full height (only as far as the content goes).
In such cases height/min-height properties should be set additionally.
@Colin
display:table works here because the body is not *shown* as table, but *rendered* as table, i.e. the minimal box width is calculated. No side effect on seo/semantics
@Cédric
Notes for IE6
1. setting expression like property for body’s min-width will fix this issue.
2. In some cases the width of the image needs to be wider than the container’s width.
For example:
* html body {width: expression(document.documentElement.clientWidth < style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">}
Please note that such css selector is not valid so it should be placed in a separate CSS file and linked using conditional comments. 904px is a value for webdesignerwall.com site’s min-width.
Great. This tutorial would have helped much when I tried to put a fixedbackground on my site. http://la-cajita.es/blog/
If anybody is willing to try it, the CSS would look like this:
body {
background: fixed url(’./images/lacajita.jpg’) no-repeat center;
color: #333333;
}
This way, with “fixed” and without “top”, it stays completely centered, even when you’re seeing just a little part of the website through a small browser window.
I would be more careful with huge backgrounds in terms of using website for different browsers - and I’m not talking about chrome/safari issue. Major problem is still pixel rounding which is different in different browsers.
E.g. FF3 will put offset 1px to the left, while IE7 will do it other way plus 1px more. Issue is appearing mainly when ‘center’ is in use.
Personally I found the way doing backgrounds in separate divs (one below body) with ‘top left’ or ‘top right’ (image is still fixed with pixel size, so shouldn’t be any problems with it). That way makes it safer for cross-browssing & saving your time to make fixes in IE.
I hope pixel rounding will be unified one day in all of the browsers (knowing market actually, proofs me wrong).