17 replies [Last post]
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Okay, so i ran across this site
http://www.3point7designs.com/advanced_type.html

Does anyone know of any sites similar?
I am looking for good ideas on techniques to apply styling to headers.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 13 years 18 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Typography?

I'm confused about what you're looking for... The CSS shows
h3.g { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #133BC1; }
which appears to be plain ole' use of font families via CSS. If that's what you're looking for more info on, I'd start here: w3c fonts (css2). Another primo source is codestyle's Combined Font Survey; they list commonly installed fonts and matrix them out by platform based on a survey running since 2001. I generally list one or two common fonts, followed by the generic font family name associated with those fonts.

Diplomacy is the art of letting someone have your way

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I see what you mean. As long

I see what you mean. As long as you have a good eye for design and a good grasp of CSS then you can pretty much make simple heading text look like anything.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes you can but... <h3

Yes you can but...

G

o

o

g

l

e

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Ya, so the code is a little

Ya, so the code is a little bloated, but I still find it pretty cool what can be done with some code, versus graphics.

I was just wondering if anyone knew of any other sites that had examples of different css headers.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Bloated? was more amused as

Bloated? Smile was more amused as to how a screen reader would handle it

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

it's all an h3 class, just a

it's all an h3 class, just a bunch of separate ones.
do you think a screen reader would do say each letter individually?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What would you expect a

What would you expect a screen reader to do with your headings on a page , ignore them?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 13 years 18 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Got it...

Okay, I figured out why your original post confuses me. You're talking about specific ways to customize headers, yet your example is using techniques that apply to any textual element. Outside of the w3c font link earlier, there's SifR although I've never implemented it.

Diplomacy is the art of letting someone have your way

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Here is exactly how Jaws would say it

Here is exactly how Jaws would say it, per Fangs, and verified with Fire Vox, the Firefox screen reader extension.

Quote:

Heading level three G Heading level three o Heading level three o Heading level three g Heading level three l Heading level three e

Read that aloud at 300 wpm, adding pauses before and after each letter.

Part of the problem is that that is as ignorant a markup as I can recall seeing. Less insane would be

Google

I didn't test in Fire Vox, but previous experience tells me the reader would try to phoneticize each letter. On my web pages, the T in Turner's is in a span to reduce kerning. Instead of saying turners, it says tuh urners. Imagine the result for six spanned letters.

The sane way to do it is to screen cap the text, and publish as an image.

Google


The screen reader, and anyone without images enabled will see the text "Google", while others will see the ™ in all its glory. Firefox, at least, will even apply whatever styles you assign the h3.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kk5st wrote:Here is exactly

kk5st wrote:
Here is exactly how Jaws would say it, per Fangs, and verified with Fire Vox, the Firefox screen reader extension.
Quote:

Heading level three G Heading level three o Heading level three o Heading level three g Heading level three l Heading level three e

Exactly and by the point at which I'd heard "heading level three oh" for the second time I would have run off somewhere else.

however there is an answer

G


o


o


g


l


e



I think that that sorts the problem nicely!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Okay... so fun and fancy css

Okay... so fun and fancy css design with words is not the way to go...

fine, ruin all my fun.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Hugo wrote:<snip> I think

Hugo wrote:
<snip>
I think that that sorts the problem nicely!

O-M-G Laughing out loud That would be cruel and unusual punishment—of the wrong person!

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yeah it's a bit crual and

Yeah it's a bit cruel and unusual and towards the wrong person , so I guess that options out then.

Deuce You can do 'stuff' but just need to be aware of some of the consequences with elements such as spans and text readers and of making a dogs dinner of markup for the sake of a bit of fancy styling.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Deuce wrote:Okay... so fun

Deuce wrote:
Okay... so fun and fancy css design with words is not the way to go...

fine, ruin all my fun.
I don't know about that. I've used css to create fancy text, then capped and exported as an image. For me, it can be a lot simpler than trying to develop the image from scratch. I'm not exactly the GIMP's poster child.

For an elementary example, see my icon at DevShed. It's simply manipulated text that was captured to an image.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

3pointross
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-09
Posts: 1
Points: 0

Yeah, the idea wasn't

Yeah, the idea wasn't necessarily practical applications of typography for all situations, more of examples of what still can be done with CSS before throwing javascript, flash, or images into the mix.

I could have coded it better, but it was done to give people ideas in what little free time I had so I didn't sit down and hash out all the logistics.

I still think there are ways and reasons to use css styling over sIFR or images. After all even a bit of code bloat is often a smaller download than an image or sIFR.

But everyone I am sure has their own opinion Wink

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I don't think they are

I don't think they are arguing about the bloat so much as the unreadability of the words with text readers for the blind folks.

i think the examples are nice, although not 100% practical in all situations, still fun none the less. I enjoy seeing and testing the power of css.

keep it up and welcome to the forums

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

In cases like this, it's not

In cases like this, it's not about screen readers or bloat, as said above. However, you can use fifty trillion elements to make a single line of text look like whatever you want Wink It's about compromise Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies