Fonts combinations

I've built a website for a fantasy hockey league : http://www.lihs-laliguedehockeysimule.com. I feel it's pretty good now but it seems that the fonts used aren't great. Can you advise me some fonts combinations which can fit with the theme of my website ? Thank you very much for your help.

 

arial, thebuchet ms, verdana for h1, h2 titles

for p text arial or georgia

 

I like your choice of fonts. The sans serif could be jazzed up a little, for this I like Optima, but not everyone has it installed. Windows does have Optimum, which is similar. Or something like Engebrechtra

wiz

 

Arial, verdana for h1, h2 titles ,and your website is beautiful .

 

From what I see here the font families are the LEAST of your problems, since you went and used dynamic fonts inside a fixed layout, that's built around the worst of the worst, fixed HEIGHT elements.

http://www.cutcodedown.com/for_others/erwan22/brokenHockey.jpg

You've fixed the height on a bunch of things that shouldn't have fixed heights since that pisses all over accessibility... the fixed width design likewise fails for the same reasons. Same can be said for the broken/inaccessible dropdown menu. (visibility and display being on the list of how NOT to build a menu).

The absurdly undersized fixed metric (px) fonts in said menu being far more of a problem than the font-faces used. As to choosing a font-face, pick one and stick with it, you could do far, far worse than just saying "arial,helvetica,sans-serif" as your stack for the whole page... like willy-nilly changing fonts at the drop of a hat as some of the re-re-respondents in this thread have suggested.

 

First, thank you all for your replies. I appreciate your answers which will help me to improve my work for sure.

I'm a newcomer to the webdesign activity so, what can you suggest me to solve this issue ? Which elements shouldn't have fixed height/width ?

Which property can I use instead of visibility and display in order to make my dropdown menu ? Thank you in advance.

 

I suspect deathshadow's answer is going to be something along the lines of "No elements should have fixed width/height, RAWR! RAWR RAWR RAWR!" But I'll let him answer on that one.

I'm also curious in how you build a drop-down menu without display: none;. That seems the most obvious solution to me. What are the drawbacks - for mobile sites? I haven't considered the problem carefully, myself.

I can see why you'd want fixed width or height for some stuff. But if you have text in there, it seems a little foolish to have fonts that might be (or *should be able to be*) resized by the end-user. Not to mention, font size varies depending on display, platform, and DPI. So instead, maybe specify those fonts in ems, with a certain padding around them, to get the visual effect of the button while maintaining scalability.

An excellent example is the "19 Buts" box, which per his screenshot, he's got the text flowing outside of the box a little, at 120 DPI. Although I'm also currently running at 120 DPI I think, and it's well inside the constraints. So, you see, different end-users, inconsistent results.

As for the general elements of the page. The entire page looks fixed-width (the main div container)...which looks OK at my current resolution, but suppose I went and viewed it on a giant widescreen running a huge resolution. It would look pretty silly, being mostly empty black space. I am not sure if deathshadow would jump on me for this suggestion or not (if he does, pay attention to what he says instead), but what I *think* I would favor instead, is to specify a min-width, and then a % for the main width of your site.

That way, it will not crumple at low resolutions...but will expand arbitrarily with high ones. Not sure what would happen to that image bar of team logos at very high res, though.

 

Well, there are cases where fixed width makes sense or is the only choice -- images for example... fixed height however, well, that's why it fails. There's nothing in that layout that should have a fixed height.

I prefer overflow:hidden on the LI... and you can also slide it around off-screen to the left since it's an APO element. Either technique works and means you don't have to worry about still being able to click on the hidden element in some browsers (visibility hides it from rendering, but acts like it's still there!) or having screen readers pretend the entire element doesn't even exist (jaws will do that with either visibility:hidden or display:none!)

I've got a demo of the overflow:hidden method here:
http://www.cutcodedown.com/codeExamples/menuDemo/template.html

The directory is open
http://www.cutcodedown.com/codeExamples/menuDemo

There's actually two versions, one using csshover3.htc, the other having it's own scripting assist to make it better for keyboard nav.

Though I've stopped stuffing everything into dropdown menus on my own sites in favor of a more classic drilldown. It's just taking something simple and turning it into 'link overload'. "Link Overload" is the concept that a page with too many links on it can become frustratingly hard to navigate, since you can't see the forest for the trees.

You probably didn't change the browser to match or are using a browser that gives a flying **** about accessibility -- Like Gecko or Webkit based ones.

Close, I'd have min-width with a media query to strip out columns and force the content to fit for mobile/small display, and a max-width in EM's. The max-width prevents lines from getting too long, while declaring it in EM's means it's automatically bigger for users using bigger default fonts.

See what I did for this site:
http://www.ewiusb.com

	min-width:734px;
	max-width:72em;
	width:95%;
	margin:0 auto;
}

Code (markup):

Well, that's why that type of space-wasting nonsense doesn't belong on a website in the first place IMHO. Giant banner image nonsense that forces you into a fixed width is rubbish, and that's why you only find that type of stuff on stupid little personal sites or businesses for whom a web presence is an afterthought. You won't find that type of stuff on any of the real success stories of the Internet.