Re: [css-d] Font treatment suggestion?
The mission of this list is the practical application of CSS. If your /personal mission/ is to seek ideas, the Web, rather than this list, may be the place to start. For example: Blockquotes and pull quotes. http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/ or, if you are into the more esoteric, explore the pages and past issues of sites like these... Idea Magazine http://www.idea-mag.com/en/ Baseline http://www.baselinemagazine.com/ Best, ~d You might find something of interest here: http://24ways.org/2005/swooshy-curly-quotes-without-images Thanks gentlmen, for these resources. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
On Sat, 19 Jun 2010, Brian M. Curran wrote:
Hiya,
Can anyone suggest a CSS font treatment to my home page quotes, that
would jazz them up and make them more appealing?
www.draftingservices.com
Chris F.A. Johnson wrote:
The biggest problem I have with that page is that is is a narrow
ribbon of text down the centre of my browser window, forcing too
much scrolling: http://cfajohnson.com/testing/draftingservices.jpg
I was trying to figure out what the fuss was about, until I refreshed the
page,
and realized that I was looking at a cached version.
Here's my thoughts:
blockquote {
margin: auto 0;
}
The margins on the paragraphs are plenty - you don't need them on the
blockquote too.
also remove the font and line height rules - I liked it better in Arial.
Also, I'd consolidate the blockquotes into 2 (instead of 5):
blockquote
pI specialize .../p
pI additionally .../p
/blockquote
blockquote
pI provide .../p
pProviding .../p
pIn summary, .../p
/blockquote
Thanks, good point. ...Tinkering with the CSS has been a fun and good
learning experience. Everyone's critiques and ideas have helped me continue
to understand CSS better, while accomplishing something very practical.
...Back to CAD work today, and then back to my home page when I have some
downtime!
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
You might find something of interest here: http://24ways.org/2005/swooshy-curly-quotes-without-images -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: June-19-10 8:27 PM To: Brian M. Curran Cc: css-d Subject: Re: [css-d] Font treatment suggestion? re: http:www.draftingservices.com Brian M. Curran wrote: As usual, thank you gentlemen. ... IMO it still lacks something though? I'm thinking that adding a nice little image for the quotation marks would be a start. That's what has always been appealing to me when I see quotes on blogs. -- The cool quotation marks and indented text. - The mission of this list is the practical application of CSS. If your /personal mission/ is to seek ideas, the Web, rather than this list, may be the place to start. For example: Blockquotes and pull quotes. http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-exa mples-and-good-practices/ or, if you are into the more esoteric, explore the pages and past issues of sites like these... Idea Magazine http://www.idea-mag.com/en/ Baseline http://www.baselinemagazine.com/ Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
Brian M. Curran wrote: Can anyone suggest a CSS font treatment to my home page quotes, that would jazz them up and make them more appealing? www.draftingservices.com I think there are at least three problems with the rendering of blockquote elements on that page: 1) Their font size is larger than that of copy text, emphasizing them too much. While it might be argued that 110% size is suitable for Times New Roman when the overall copy text font is Arial (because Times New Roman is smaller than Arial of the same size, in the sense that letters are smaller in the average), the same is not true for Georgia. One of the fundamental problems in practical CSS is that when you set, say, font-family: Georgia, Times New Roman you cannot know which font will be used. How can you set font size, line height, and other properties well, then. Well, you cannot. Listing several font families is mostly illusionary. It is often better to use just one font family, possibly backed up with a generic name serif or sans-serif when relevant, and selecting a font that will be available in most browsing situations, and then design other properties accordingly. Alternate fonts usually make sense only when they are reasonably similar to the primary font (like Helvetica and Arial fonts, which is largely just variations or implementations of a theme). 2) The font is rather different from that of copy text, namely (Helvetica Neue or) Arial. While font differences can convey a message, too big a difference may carry a wrong message. Ideally, if you use both a serif font and a sans-serif font for text on a page, they should be compatible by design, like the C fonts are. But since C fonts are not in use widely enough, I would actually use Times New Roman for blockquote here. 3) The column width is too narrow, causing rather great variations in line length. This is bad for esthetics and bad for readability. If you cannot increase the width, then you might check how much it helps to insert a few soft hyphes in critical places, to have some long words hyphenated. (Using Times New Roman instead of Georgia helps a little, but just a little, due to the somewhat smaller average width of characters.) -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
On Sat, 19 Jun 2010, Brian M. Curran wrote: Hiya, Can anyone suggest a CSS font treatment to my home page quotes, that would jazz them up and make them more appealing? www.draftingservices.com The biggest problem I have with that page is that is is a narrow ribbon of text down the centre of my browser window, forcing too much scrolling: http://cfajohnson.com/testing/draftingservices.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
On Sunday, June 20, 2010 5:30:10 pm Chris F.A. Johnson wrote:
On Sat, 19 Jun 2010, Brian M. Curran wrote:
Hiya,
Can anyone suggest a CSS font treatment to my home page quotes, that
would jazz them up and make them more appealing?
www.draftingservices.com
The biggest problem I have with that page is that is is a narrow
ribbon of text down the centre of my browser window, forcing too
much scrolling: http://cfajohnson.com/testing/draftingservices.jpg
I was trying to figure out what the fuss was about, until I refreshed the page,
and realized that I was looking at a cached version.
Here's my thoughts:
blockquote {
margin: auto 0;
}
The margins on the paragraphs are plenty - you don't need them on the
blockquote too.
also remove the font and line height rules - I liked it better in Arial.
Also, I'd consolidate the blockquotes into 2 (instead of 5):
blockquote
pI specialize .../p
pI additionally .../p
/blockquote
blockquote
pI provide .../p
pProviding .../p
pIn summary, .../p
/blockquote
I suppose this means that I have now contributed 4ยข to this page.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font treatment suggestion?
Hiya, Can anyone suggest a CSS font treatment to my home page quotes, that would jazz them up and make them more appealing? www.draftingservices.com Sincerely, Brian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
Brian M. Curran wrote:
Hiya,
Can anyone suggest a CSS font treatment to my home page quotes, that would
jazz them up and make them more appealing?
www.draftingservices.com
Sincerely,
Brian
blockquote {color : fuchsia; }
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
On Saturday, June 19, 2010 11:01:37 am David Laakso wrote:
Brian M. Curran wrote:
Hiya,
Can anyone suggest a CSS font treatment to my home page quotes, that
would jazz them up and make them more appealing?
www.draftingservices.com
Sincerely,
Brian
blockquote {color : fuchsia; }
~d
just for kicks, I ran that through Chrome to see how bad a page of magenta
text would look, and discovered that none of the quotes are marked up with
blockquote. They're all just standard paragraphs. I would recommend starting
by marking them up properly, with blockquote and q as appropriate.
That'll make them much easier to select for styling.
As an aside, what on earth are all those br tags after your paragraphs for?
I'd leave them out, and use margins on the paragraphs to create the same
effect.
As far as styling quotes, I don't know that I would. They make up so much of
the content of the page that if they had a different style from the rest of it,
it would either be too much, or make the rest of the page look out of place.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
Tim Climis wrote:
www.draftingservices.com
Brian
blockquote {color : fuchsia; }
~d
just for kicks, I ran that through Chrome to see how bad a page of magenta
text would look
---Tim
No question about. This would be *much* better:
blockquote {color : lime; background: fuchsia;}
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
Tim Climis wrote:
www.draftingservices.com
Brian
blockquote {color : fuchsia; }
~d
just for kicks, I ran that through Chrome to see how bad a page of
magenta
text would look
---Tim
David Laakso wrote:
No question about. This would be *much* better:
blockquote {color : lime; background: fuchsia;}
~d
As usual, thank you gentlemen.
I got rid of the brs, added the blockquote tags, tried the q tag but
it didn't work, and also gave the color scheme a whirl but it was too
radical for me. I'm happier than I was, because the code is cleaned-up and
the page seems more readable with the quote indents. IMO it still lacks
something though? I'm thinking that adding a nice little image for the
quotation marks would be a start. That's what has always been appealing to
me when I see quotes on blogs. -- The cool quotation marks and indented
text.
Thanks again for making my site better!
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font treatment suggestion?
re: http:www.draftingservices.com Brian M. Curran wrote: As usual, thank you gentlemen. ... IMO it still lacks something though? I'm thinking that adding a nice little image for the quotation marks would be a start. That's what has always been appealing to me when I see quotes on blogs. -- The cool quotation marks and indented text. - The mission of this list is the practical application of CSS. If your /personal mission/ is to seek ideas, the Web, rather than this list, may be the place to start. For example: Blockquotes and pull quotes. http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/ or, if you are into the more esoteric, explore the pages and past issues of sites like these... Idea Magazine http://www.idea-mag.com/en/ Baseline http://www.baselinemagazine.com/ Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
