Fonts and Web Design

Toggle sidebar Toggle sidebar
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
I'm having some issues in a large aspect of my webwork projects with fonts, font types, spacing, and all that other jazz. Does anyone have any links to some good books or guides on how to apply fonts in a sexy/professional way? I'll take any advice as well like "don't put font on multi-colored objects without outlines". Anything helps.

Example of my dilemma: http://rinaun.com/rz/ (my personal site; super rough) the font at the bottom section looks horrid to me. I can't seem to figure out if it's the font face itself, the justification in the alignment, my CSS settings, or if it's just me thinking it looks like poo. I spent almost 30 minutes dicking around with just it before I realized I didn't know what I was aiming for.

TLDR: help me (a coder) out by telling me why my design in fonts is so off or give me some references to good design methodology. I seem to have the same issue with fonts across multiple projects, as well as some coloring issues (I avoid colors hence the blue/grey tone). I'm not an art major so I try my best :).

P.S. didn't put this in the coding section as it didn't feel like it's coding. If I missed a section to put this then mods bump me :)
 
Last edited:
JMapleton

JMapleton

Diamond Member
Nov 19, 2008
4,179
2
81
Don't use fonts on your website that most people won't already have installed on their computer. If you must used a unique font, do it in in an image (jpg, gif, etc).
 
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
JMapleton said:
Don't use fonts on your website that most people won't already have installed on their computer. If you must used a unique font, do it in in an image (jpg, gif, etc).
Click to expand...

Man, this goes against a lot of what I was taught but I don't disagree with it at all. Is there any downsides to using PNG/JPG for logos and other fancy things like verbal icons/buttons? Scaling issues or anything?

Ichinisan said:
We don't like serifs anymore these days.
Click to expand...
I'll look into serifs; I don't have a real understanding of a difference between font-types. Is there a suggested/top list of font types for webwork that aren't basics like Ariel? I'm so lost in terms of fonts and stuff in regards to CSS and optimization/compatibility. I notice in some validation tests that google fonts doesn't apply at all, which makes my site look horrid.
 
Last edited:
ISAslot

ISAslot

Platinum Member
Jan 22, 2001
2,891
108
106
Justified text in small panels will usually always look messy. Do you not like the look when left justified?

example.JPG
 
Last edited:
clamum

clamum

Lifer
Feb 13, 2003
26,256
406
126
Monitoring this thread. I'm also a coder, but I couldn't design a nice looking site to save my life. Color themes, font sizes and typeface, graphics, etc etc etc = I FAIL HARD. My software may look like a prolapsed anus, but at least it works.
 
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
ISAslot said:
Justified text in small panels will usually always look messy. Do you not like the look when left justified?

example.JPG
Click to expand...

It's not that I dislike it in any particular alignment.......I just don't honestly know what looks "right". In that picture would you say that the text looks fine? It still bothers me with the amount of spacing on each side; it just seems strange. Maybe the column is too narrow? Having the text be even is my way of shooting in the dark in hopes that it looks right. I wasn't sure if it's just the font not filling the space correctly or what.

I'd agree with the comments about the ux designers. The deeper I get into coding various languages, the more I realize in today's era that there are many angles to writing great software; you have compatibility, ease of use, and tons of other angles to look at now. If nobody can easily use your software, etc...........


brianmanahan said:
trebuchet ms

/thread
Click to expand...
I'm not sure if that was a joke or not, but I checked the font out. It looks pretty cool; I'm going to play around with it on a test page and see how it looks.


EDIT: another thing that I have no idea about is font size. I have really good eyes and the people that I hang with have very TERRIBLE eyes, so it's either a mix of it's too small or it looks way too large. Any guidelines on that would be nice.
 
Last edited:
brianmanahan

brianmanahan

Lifer
Sep 2, 2006
24,627
6,011
136
Rinaun said:
I'm not sure if that was a joke or not, but I checked the font out. It looks pretty cool; I'm going to play around with it on a test page and see how it looks.
Click to expand...

nah i was actually being serious - i love it for logos and nav buttons/links
 
JMapleton

JMapleton

Diamond Member
Nov 19, 2008
4,179
2
81
Rinaun said:
Man, this goes against a lot of what I was taught but I don't disagree with it at all. Is there any downsides to using PNG/JPG for logos and other fancy things like verbal icons/buttons? Scaling issues or anything?
Click to expand...

Use as much text as you can, that's what the search engines see. But if you absolutely must use a non standard font, do it as a jpg or gif. Not png though.
 
JMapleton

JMapleton

Diamond Member
Nov 19, 2008
4,179
2
81
lxskllr said:
Why is that? pngs seem to look nicer, and scale better.
Click to expand...

I could be mistaken in this, but pngs I believe are much larger in size. Unless this is a low traffic website and bandwidith is not an issue.

In the past, I've also had trouble loading pngs in some browsers.
 
lxskllr

lxskllr

No Lifer
Nov 30, 2004
60,117
10,579
126
JMapleton said:
I could be mistaken in this, but pngs I believe are much larger in size. Unless this is a low traffic website and bandwidith is not an issue.

In the past, I've also had trouble loading pngs in some browsers.
Click to expand...

They do tend to be a little bigger. I guess you'd have to duplicate examples to see if the size matters for the application. Browsers should all support png at this point. I haven't had issues, even on some primitive browsers. I'd like to see svg support get universal. They have nice sizes, and scale perfectly through any range. But what do I know? I know little about web design, and most third graders have more artistic talent than I do. I know a good page when I see one, but couldn't create one if my life depended on it.
 
Red Squirrel

Red Squirrel

No Lifer
May 24, 2003
70,612
13,816
126
www.anyf.ca
clamum said:
Monitoring this thread. I'm also a coder, but I couldn't design a nice looking site to save my life. Color themes, font sizes and typeface, graphics, etc etc etc = I FAIL HARD. My software may look like a prolapsed anus, but at least it works.
Click to expand...

I'm kind of the same way.

I really want to make a MMO/sandbox game... but the thought of how I'd do the graphics is what is putting me off. Though, I really want to learn how to use Blender. For someone not good at graphics, doing 3D is probably actually easier than 2D. Can even do it without textures at first, then figure those out later. Look at Minecraft, it's pretty simple graphics but can still look good. I'd still need to do graphics for the gumps and stuff though.

As for fonts in web pages I try to stick with standard ones like Arial, Times, verdana etc.

Is there a standard way to use a non standard font though? Like some way to "point" at the actual font file and the browser will be able to use it? Would be neat if there was a way to use fancy fonts but that everyone could still view them.
 
Red Squirrel

Red Squirrel

No Lifer
May 24, 2003
70,612
13,816
126
www.anyf.ca
JMapleton said:
I could be mistaken in this, but pngs I believe are much larger in size. Unless this is a low traffic website and bandwidith is not an issue.

In the past, I've also had trouble loading pngs in some browsers.
Click to expand...

Actually PNGs could work nice for this as PNG size is dependent on how complex it is. An image that uses like 10 colours and is only a few lines like a couple shapes or something will be smaller than something like a photo that has a couple thousand colours. PNG transparancy is also really nice because of the alpha layer. Though, that does not work in IE, but fuck IE. :p
 
clamum

clamum

Lifer
Feb 13, 2003
26,256
406
126
JMapleton said:
I could be mistaken in this, but pngs I believe are much larger in size. Unless this is a low traffic website and bandwidith is not an issue.

In the past, I've also had trouble loading pngs in some browsers.
Click to expand...
Eh, I think the size issue depends. A couple KB in size difference doesn't really matter IMO, in most cases anyway. And as far as compatibility, nowadays there shouldn't be any problem loading a .png by the major browsers.

I don't see a reason to use an older format like .gif over .png, unless the .gif was a substantial amount smaller in size (usually only in smaller images; an indexed PNG is smaller, usually, otherwise). PNG has way better color support and transparency support as well.

Wikipedia's PNG Entry is a good reference.
 
Last edited:
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
http://www.rinaun.com/rz/

Trebuchet added, readjusted font size. I tried center, justify, left, and right and all of them still looked a bit strange. Is it the column width? I'm missing something here :(

P.S. Trebuchet looks nice. Thanks for the suggestions! The @font-face looks like it also might be worth doing because you can add fallback fonts.
 
FeuerFrei

FeuerFrei

Diamond Member
Mar 30, 2005
9,144
929
126
I like the font-size in the little boxes now. I would go with text-align:left, a hair more line-height, and increasing padding in the boxes. If text-align:left makes the right too ragged, just hyphenate the proper words with ­ (soft hyphen).

Some other things I'd tweak:
The company name seems lost in the left upper corner. Push it away from the edges(?) Larger font (?)
Start Today button seems crude. May be the color. Pure css button, I guess.
Zoom in on the front of the Intel rack equipment pictured.
Row of four bottom boxes need more empty space above them.
 
xanis

xanis

Lifer
Sep 11, 2005
17,571
8
0
Try to limit the number of different fonts that you use. I'm seeing ~4 different ones; try limiting that to 2. I'd also try playing around with different weights and sizes for your content blocks.

You might want to try creating a system for your typography to make sure you're using weights, styles, and sizes consistently and appropriately. For example:

- All <h1> elements are 32px, 900 weight, and blue
- All <h2> elements are 26px, 700 weight, and gray
- All <p> elements are 14px, 300 weight, and black

&#8230;etcetera, etcetera. Consistently goes a long way in tying things together.

<-- UX Designer

I'd be happy to answer any more questions anyone might have. I do this stuff for a living. :p
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom