in the meantime, here's a design for an artist's portfolio website.
qualities striving for: sleek, functional, professional, subtly raw.
we'll see what he thinks of it. i'm using milkbox for his gallery, which is a grid of clickable boxes that bring up the higher-res version in a neat little in-browser frame. it'll be going where the news is.
I have to say I find that design to be quite bland. A greyscale colour pallet can be used effectively, but to be honest it's kind of boring here.
There are also some minor things I disagree with. For example, if you were going for 'sleek' I think choosing to use a grungy texture in the background was a bad choice - it doesn't convey sleekness at all. Also, the positioning of the text doesn't quite match up. For example, if the heading was positioned slightly to the left, the left-most bracket would be in line with the 'news' section, while if the links on the left were moved slightly up they would also be in line. It seems trivial but small details like this can make a big difference, and if you wanted to suggest 'professional' you'd want everything to be very structured and orderly.
Or I could just be blathering on nonsensically. Either way.
Thanks - no, yeah, that's quite helpful. I think that's really all the critique I need with regards to this design, actually.
The text alignment has been fixed - I just realized I uploaded an old iteration by mistake.
For a bit of background, this is an artist portfolio site, but the man has refused to provide me with his portfolio. I've been asking him for a month. I have nothing to go on, hence the blandness. Maybe I'm not creative enough.
Big things first, I suppose; I don't like the navigation "bar"; unfortunately, I can't figure just what it is I don't like about it (could be the size, or the centered alignment, but either way, the brackets definitely have something to do with it). I'd play around with it a bit more, if I were you. I'd also agree with Flay about the alignment of the elements. I feel like the background is meant to convey the "slightly raw" feel you mentioned aiming for, so I don't take issue with it, though to balance it with the "sleek," I might consider toning it down just the tiniest bit.
From a more technical standpoint, I take it this is a mockup of the site; have you considered the implementation on different-sized monitors? The proportions look alright to me now, but my screen is a bit bigger than that, and the empty space you'd create if you were to keep the proportions and center the arrangement on the screen might make the design seem a bit too bare. Also, how will the background scale? It looks like the textures extend throughout the design, but for bigger monitors, you're either going to have to tile it somehow, or anchor it somewhere, and fade the background to a single color--unless you go with one of those fancy-dancy script-based backgrounds, I suppose.
Last thing is that I really want to see your take on the other pages of this site, particularly the more text-based ones (CV, About, and Bio), and the Contact section (which, in my experience, is always difficult because there's so little content to fill up the space; though I may just be a bad designer-wannabe in that respect).
Overall, it feels a bit incomplete, but in a way I can't really articulate at the moment. It does look good, though, and I think you at least go a long way to conveying the qualities you seek to express.
For a bit of background, this is an artist portfolio site, but the man has refused to provide me with his portfolio. I've been asking him for a month. I have nothing to go on, hence the blandness. Maybe I'm not creative enough.
You could always just put up some of your own work in the meantime.
... but the man has refused to provide me with his portfolio. I've been asking him for a month. I have nothing to go on, hence the blandness.
Worst possible client. 'I want you to do something for me, and I'm going to give you a vague idea of what I want. But I'm not giving you anything else. No, no matter how hard you ask.' Let him know that if he's not going to show you what the entire site revolves around - what the design needs to complement - then there's no way you can design for him. And if this isn't a paid comission, I see no reason not to tell him right where to stick it (unless, of course, he's a friend, or a friend of a friend or the like).
The other art in your thread says otherwise. I'm gonna put this down largely to the client. I should have said I do like what you have, but it does need a bit of work.
it's actually originally in a widescreen format (the background, that is.) it's just going to continue off. value-wise, though, it's going to maintain the same.. ratio? the composition works in both formats, is what i'm trying to say.
i'm going to upload wider formats and text pages in a second.
these are mockups, so i don't have scalable versions, but the text is going to be a fixed-width div at 1000x768 or whatever that resolution is.
if your monitor is higher-resolution than 1280x960, what the hell is wrong with you. seriously. still, it's designed so that there's screen bleed (i think i just made that term up)
flay: be an asshole. i'm a big boy.
gallery is from some other site. i just copied a row and manipulated it a bit.i have no idea how many images he has, so it's just a test arrangement.
e: text is from his artist's statement, the only thing i've gotten form him so far.
ee: oh, yeah, it's a paid commission. i need money.
Screen bleed? I don't mind you having made the term up, just so long as you tell us what you mean by it; that the background goes beyond the screen? Because it's smaller than mine (1440x900), and I'm on a friggin' laptop, so I don't know that resolutions in my neighborhood are exactly rare. You could try centering your background and including a coordinated background color, so that at the very least it still looks decent at apparently-überhigh-resolution screens like mine.
I really like the way you've got the text going, there, and I agree completely with your decision to fix the div width for the text. I'm just worried about the background. I'm interested to see how you implement the Milkbox app so that it flows with the design of the page (I think that's my only beef with those gallery-viewing apps, generally; they often feel out of place with the rest of a page's design), but I imagine it'll turn out looking fine. The navigation bar still feels off, in my opinion; thinking about it more, I think its essential problem is that the text stands out too much. Either changing the size, or the color (if they're going to be images, you could always consider a bit of alpha transparency, with a solid-colored mouseover), might help tone it down a bit.
Just my two cents, anyway. Either way, it's a good design.
EDIT: Oh, right, almost forgot; do web design programs have hyphenators these days? If not, I can tell you from personal experience that hyphenating that text manually is going to be a bit of a pain, since the three main browsers render text size and spacing differently enough that you'll have to hyphenate for all three of them (using for the discretionary hyphen).
I'll probably implement your background colour idea, craw, thanks. I'll meet with the guy tonight, and if he decides to go with the general design I'll implement your crits.
I'll make the nav bar text smaller, for one. I think I just made a typo when I set their pt values, and didn't noticed because I was working zoomed out.
Aw, no prob; when I can give crits to a great-looking design like that, it makes me feel like I'm actually a better designer than I really am (the trick is to be really wordy so that it sounds like I'm being thorough).
Well, you might still want to consider some sort of hyphenation, just so that the right side doesn't get too ragged (or so that the spacing doesn't go crazy, if you go justified); really, I wish web design programs did have automatic hyphenation (even though I imagine it would come at the expense of the legibility of the source text), just because the raggedness (or spacing) is something that needs to be considered more on websites, especially with narrower text widths and more textual content; for instance, I don't think you'd have to worry about it for the news page. Something to consider, anyway, if ever you feel particularly masochistic.
NAC, that does remind me of something I read in a book about page design (of the non-web variety), saying essentially that, that especially when it ends up obfuscating the meaning of the words, the optimal hyphenation isn't always the one you should end up going with.
I wonder, also, if maybe your comment about the gallery page might actually work in favor of the grey design, in that it would defer its focus to the art, which is what really matters in the end.
I wonder, also, if maybe your comment about the gallery page might actually work in favor of the grey design, in that it would defer its focus to the art, which is what really matters in the end.
That was actually why I was bringing it up. I guess I just didn't clarify it enough.
EDIT: Also, this is a veiled attempt to just repeat what someone else said.
NotASenator on
0
Options
TonkkaSome one in the club tonightHas stolen my ideas.Registered Userregular
edited April 2009
As good as your stuff may be Orikae, I will never forgive you.
In other news, a revised website design, with the client's crits included: distressed name, more focus on central aspect, modified texture in the background.
that's cool. That's the hard thing with working with a patterned roughly middle gray background, white isn't bright enough and black isn't dark enough for it.
Orik, some things i noticed, (i mean you did ask for it right?)
- I see you changed fonts. while í'm glad because i did not like the previous one (had some odd optical illusion aspect that made it really uneasy on the eyes). This one however screems "generic 3-D shooter menu screen" .
- The outer border does not complement the innner frame at all. The textures clash and the colours don't make for an interesting contrast. Also what is up with the slighly darker bar on top of the main frame. EDIT: I understand it's the same texture but the way it's filtered makes it look like something else entirely.
- It looks like you've got four different fonts on one page, this does not help the sleek look you were going for.
I. are you sure? 16px is 1em, and it looks pretty terrible like that. I used 1.1em and it looks a bit better.
to bwanie: the font choices, unfortunately, were requested by the client. There's actually only 2 typefaces on the page, but i guess it says something that they look different. I'm not sure what.
The sleek look was abandoned as soon as the client offered revisions. I'm just looking for its success as a portfolio website.
also: what darker bar? i have no idea what you mean.
Orik,
ems are relative to the end-user
16px is approx 1 em though,
but in your case,
they are rendering at about 15.3367--
try pixy's cascaded style favelet to see: http://www.pixy.cz/pixylophone/favelets/
You should probably redefine one em in your css. Set 1 em to 10 px, it will make the math easier.
Right now you have a lot of fractional font-sizes which is bad news--produces very inconsistent results.
Also the inheritance is going to be a nightmare if you make changes/add anything.
Set the font size in body:
body {font-size:62.5%}
this causes 1em == 10px, which really simplifies the math, and elimiantes the problems you may be having.
and,
looking at your code quickly,
you are running into inheritance issues
the issue with ems is you have to reset them frequently
otherwise, when you say 1.1 em, you won't get 11, you'll get the computed value of the ancestor, which let's say it's 12--so now you're getting 110% of 12
that's why your sizing is off in several places
if you get the favelet I posted, you can test it on an element by element basis
I love the concept of ems and use them, but ultimately, I gave it up because all the modern browsers now do ZOOM by default instead of a simple text size enlargment. The inheritance is just too big of a hassle on a drupal powered site which is aggregating content from dozens of database calls into multiple layout blocks. for a small site like this though it shouldn't be an issue, you just have to go through and check the inheritance.
Also, visually, I really agree with the other posts. I'd drop the outer background! It really hurts the interior.
Keep the interior & just make it stretch 100% height, and make the outer, a soft grey or similar.... or some simple fade from grey to white/black/whatever if you want to keep it interesting but still b&w.
Heartlash: he's using relative values, so he thought he had 16 px because he used 1.1 em, but that's really a fractional value of the parent size, which is the current font-size--which is about 12.8, so he's getting some weird number instead of 16. That's where the confusion is. Also, he is using line-height in the styles, so he does understand the concept I am sure .
Orik--site looks good though, just trying to give you the advice you asked for, hope it's not taken personally. The basic structure you are using is very clean & nice (Code-wise) and a great job. You've done some good work here.
LAST thing I'd recommend is making it clear that the CV is a pdf--maybe writing pdf in small letters next to it/etc--or just converting it to html with a link to the pdf document in line with the page.
and Orik, these are problems that every web developer runs into with their early commercial work. I'm sure at times it was and is and will be frustrating, but it is also an extremely rewarding career, and I wish you great luck.
thanks! no offense taken, i'm actually really glad you posted - this is exactly the kind of crit i'm looking for.
one thing - which favelet did you mean? there's a bunch here.
and, unless I've forgotten something, the only time I used ems was in the p style for line-height, which means it should still work for the purposes of leading, right?
i mean, percentage styling runs into the same inheritance issues, i was just making sure my understanding is right.
NappuccinoSurveyor of Things and StuffRegistered Userregular
edited May 2009
I like the site a lot . It might be a touch too grey ( though, i'm seeing this on a 1680-1050 and the far background isn't that interesting). Could you give an two or three options for choosing the basic aspect ratio?
Man, with crits like these, we're going to have a tough time justifying our "we're not programmers" line in the rules.
Anyway, I suppose I'll start with the general and less code-based, and move into the code from there.
The first thing I noticed is the image-based text; I know he specified the typefaces, but is there any way to make them look a little bit less distressed? The list typeface is kind of hard to read, but I suppose it's passable enough; the typeface for the title, though, seems to go a bit too far, as the G barely reads as such.
The second thing is the border background; it's been mentioned before, and I'd like to second the disapproval. My problem is that it's too textural; that is to say, while the inner background seems flat, and works well that way, the outer one has a bumpy look, and it clashes with the inner one. It doesn't help, additionally, that they seem to be roughly similar in overall contrast, but also seem to be slightly different temperatures of grey. I would suggest something perhaps a little more complementary, and a lot more subtle (which, I suppose, might be a bit tricky to pull off).
Getting a bit more into the code side of things, I don't like the way you've got the paragraph indents working. I mean, they're fine per se, but they don't work in the places where you've got a single line of text (where the lack of context makes it seem like the whole body is indented, which in turn hurts the sense of stylistic continuity between pages), and look even more out of place in the contact form. You might fix that with a separate paragraph class without the indent for those special cases (and probably by getting rid of the paragraph tag altogether for the form; semantically, it shouldn't be there). Personally, though, I would suggest looking into an unindented first paragraph as a rule for your text (which you could accomplish with a first-child pseudoclass, but since I don't think support for that is very universal yet, you'd probably be better off with a separate class); there's precedence in printed publication (and I know they have a good reason for doing it, but I can't remember what that is), and it would preserve stylistic unity more fully.
Other people have discussed the leading; personally, I might look into increasing it even more, and seeing if that further improves the readability. My guess is that it will, especially since your text body is wider than it ought to be for optimal readability (though that itself isn't a crit, since having the proper width is only really practical in books). It would come at the expense of having unified/coherent-looking paragraphs, though, so it's up to you where you think the best balance would be.
Something not entirely design-related, but you ought to have something indicating that the CV is a PDF file, as a courtesy to people who want to browse without launching Adobe Reader (also, you might want to consider having it open up in a separate window).
Getting into the really nitpicky territory, you might want to at least consider having some of the acronyms spelled out with an acronym or abbr tag and a title attribute, for screen readers. Ultimately, the amount of attention you want to give accessibility is, I will admit, somewhat limited by the fact, mentioned in ND's thread a while back, that those who are going to be browsing an artist's website are somewhat less likely to be unable to see, but it often doesn't hurt to err on the side of caution.
In the About section, the hyphen at the beginning of the last paragraph might look better as an ndash or an mdash. Up to you. In the same vein, you could look into ldquo and rdquo instead of quot, as long as you're encoding the symbol.
Most of the code stuff has been mentioned, I think (I'm specifically thinking of SporkAndrew's suggestions, which I second), and this omits the CSS, which I haven't looked at, but I would add the exceedingly trivial suggestion that double spaces at the ends of your sentences are unnecessary. That isn't really worth fixing, though, unless you're really hurting for filespace.
I think that's it; hopefully it is, anyway. At the length this thing's at, I hope there's something useful and unique here (I know that at least a couple of the things I've said were mentioned before, and more briefly).
EDIT: Hmm...now that I've seen your CSS, a couple of odd things do stand out.
You've got Calibri before Arial, and yet the site renders with Arial; can't figure out why, but if I've got time, I'll copy the relavent files and play around to check it out.
You've also got a specified hover effect that isn't playing out in the site (though I would advise against making a hover bold, anyway, because it can wreak havoc on the layout). Again, not sure why.
Not (directly) CSS related, but your background goes all the way down the page in IE, but not in Safari for Windows or Firefox (there's more space in the bottom with Safari than with Firefox). I don't know if that's intentional, but I thought I ought to point it out.
oh, wow. thanks, guys. I've got a lot to work through :P
I actually have no idea why the hover effects don't work - in fact, none of the a.(whatever) selectors seem to be working, which i found out when I tried to do text-decoration: none & change the active/visited links' colours. the only one that does is the overarching a, which I compromised with when I couldn't figure out how to get the rest to work.
Posts
qualities striving for: sleek, functional, professional, subtly raw.
we'll see what he thinks of it. i'm using milkbox for his gallery, which is a grid of clickable boxes that bring up the higher-res version in a neat little in-browser frame. it'll be going where the news is.
http://reghellin.com/milkbox/
i hesitate to even call this design, though, since i really didn't do all that much. i'm new to this stuff!
There are also some minor things I disagree with. For example, if you were going for 'sleek' I think choosing to use a grungy texture in the background was a bad choice - it doesn't convey sleekness at all. Also, the positioning of the text doesn't quite match up. For example, if the heading was positioned slightly to the left, the left-most bracket would be in line with the 'news' section, while if the links on the left were moved slightly up they would also be in line. It seems trivial but small details like this can make a big difference, and if you wanted to suggest 'professional' you'd want everything to be very structured and orderly.
Or I could just be blathering on nonsensically. Either way.
The text alignment has been fixed - I just realized I uploaded an old iteration by mistake.
For a bit of background, this is an artist portfolio site, but the man has refused to provide me with his portfolio. I've been asking him for a month. I have nothing to go on, hence the blandness. Maybe I'm not creative enough.
Big things first, I suppose; I don't like the navigation "bar"; unfortunately, I can't figure just what it is I don't like about it (could be the size, or the centered alignment, but either way, the brackets definitely have something to do with it). I'd play around with it a bit more, if I were you. I'd also agree with Flay about the alignment of the elements. I feel like the background is meant to convey the "slightly raw" feel you mentioned aiming for, so I don't take issue with it, though to balance it with the "sleek," I might consider toning it down just the tiniest bit.
From a more technical standpoint, I take it this is a mockup of the site; have you considered the implementation on different-sized monitors? The proportions look alright to me now, but my screen is a bit bigger than that, and the empty space you'd create if you were to keep the proportions and center the arrangement on the screen might make the design seem a bit too bare. Also, how will the background scale? It looks like the textures extend throughout the design, but for bigger monitors, you're either going to have to tile it somehow, or anchor it somewhere, and fade the background to a single color--unless you go with one of those fancy-dancy script-based backgrounds, I suppose.
Last thing is that I really want to see your take on the other pages of this site, particularly the more text-based ones (CV, About, and Bio), and the Contact section (which, in my experience, is always difficult because there's so little content to fill up the space; though I may just be a bad designer-wannabe in that respect).
Overall, it feels a bit incomplete, but in a way I can't really articulate at the moment. It does look good, though, and I think you at least go a long way to conveying the qualities you seek to express.
EDIT:
You could always just put up some of your own work in the meantime.
Worst possible client. 'I want you to do something for me, and I'm going to give you a vague idea of what I want. But I'm not giving you anything else. No, no matter how hard you ask.' Let him know that if he's not going to show you what the entire site revolves around - what the design needs to complement - then there's no way you can design for him. And if this isn't a paid comission, I see no reason not to tell him right where to stick it (unless, of course, he's a friend, or a friend of a friend or the like).
The other art in your thread says otherwise. I'm gonna put this down largely to the client. I should have said I do like what you have, but it does need a bit of work.
Only in the English language can this make sense.
EDIT: Also, please note I can be really critical when it comes to small details. I'm what you might call an 'asshole'.
i'm going to upload wider formats and text pages in a second.
these are mockups, so i don't have scalable versions, but the text is going to be a fixed-width div at 1000x768 or whatever that resolution is.
if your monitor is higher-resolution than 1280x960, what the hell is wrong with you. seriously. still, it's designed so that there's screen bleed (i think i just made that term up)
flay: be an asshole. i'm a big boy.
gallery is from some other site. i just copied a row and manipulated it a bit.i have no idea how many images he has, so it's just a test arrangement.
e: text is from his artist's statement, the only thing i've gotten form him so far.
ee: oh, yeah, it's a paid commission. i need money.
I really like the way you've got the text going, there, and I agree completely with your decision to fix the div width for the text. I'm just worried about the background. I'm interested to see how you implement the Milkbox app so that it flows with the design of the page (I think that's my only beef with those gallery-viewing apps, generally; they often feel out of place with the rest of a page's design), but I imagine it'll turn out looking fine. The navigation bar still feels off, in my opinion; thinking about it more, I think its essential problem is that the text stands out too much. Either changing the size, or the color (if they're going to be images, you could always consider a bit of alpha transparency, with a solid-colored mouseover), might help tone it down a bit.
Just my two cents, anyway. Either way, it's a good design.
EDIT: Oh, right, almost forgot; do web design programs have hyphenators these days? If not, I can tell you from personal experience that hyphenating that text manually is going to be a bit of a pain, since the three main browsers render text size and spacing differently enough that you'll have to hyphenate for all three of them (using for the discretionary hyphen).
I'll make the nav bar text smaller, for one. I think I just made a typo when I set their pt values, and didn't noticed because I was working zoomed out.
Thanks for your thorough critiques.
and 'great-looking design' makes me extremely flattered.
I'm not normally a fan of grey designs, and I think that's why I like the gallery page the most. The small hits of color really pop.
On a side note, the default resolution of my monitor at home is 1680x1050.
I wonder, also, if maybe your comment about the gallery page might actually work in favor of the grey design, in that it would defer its focus to the art, which is what really matters in the end.
That was actually why I was bringing it up. I guess I just didn't clarify it enough.
EDIT: Also, this is a veiled attempt to just repeat what someone else said.
In other news, a revised website design, with the client's crits included: distressed name, more focus on central aspect, modified texture in the background.
client some korean dude? what does he do? what is the site for?
www.dongkyoona.com
- I see you changed fonts. while í'm glad because i did not like the previous one (had some odd optical illusion aspect that made it really uneasy on the eyes). This one however screems "generic 3-D shooter menu screen" .
- The outer border does not complement the innner frame at all. The textures clash and the colours don't make for an interesting contrast. Also what is up with the slighly darker bar on top of the main frame. EDIT: I understand it's the same texture but the way it's filtered makes it look like something else entirely.
- It looks like you've got four different fonts on one page, this does not help the sleek look you were going for.
Hope this helps.
Just add line-height:16px to the css.
Our first game is now available for free on Google Play: Frontier: Isle of the Seven Gods
to bwanie: the font choices, unfortunately, were requested by the client. There's actually only 2 typefaces on the page, but i guess it says something that they look different. I'm not sure what.
The sleek look was abandoned as soon as the client offered revisions. I'm just looking for its success as a portfolio website.
also: what darker bar? i have no idea what you mean.
ems are relative to the end-user
16px is approx 1 em though,
but in your case,
they are rendering at about 15.3367--
try pixy's cascaded style favelet to see: http://www.pixy.cz/pixylophone/favelets/
You should probably redefine one em in your css. Set 1 em to 10 px, it will make the math easier.
Right now you have a lot of fractional font-sizes which is bad news--produces very inconsistent results.
Also the inheritance is going to be a nightmare if you make changes/add anything.
Set the font size in body:
body {font-size:62.5%}
this causes 1em == 10px, which really simplifies the math, and elimiantes the problems you may be having.
looking at your code quickly,
you are running into inheritance issues
the issue with ems is you have to reset them frequently
otherwise, when you say 1.1 em, you won't get 11, you'll get the computed value of the ancestor, which let's say it's 12--so now you're getting 110% of 12
that's why your sizing is off in several places
if you get the favelet I posted, you can test it on an element by element basis
I love the concept of ems and use them, but ultimately, I gave it up because all the modern browsers now do ZOOM by default instead of a simple text size enlargment. The inheritance is just too big of a hassle on a drupal powered site which is aggregating content from dozens of database calls into multiple layout blocks. for a small site like this though it shouldn't be an issue, you just have to go through and check the inheritance.
Also, visually, I really agree with the other posts. I'd drop the outer background! It really hurts the interior.
Keep the interior & just make it stretch 100% height, and make the outer, a soft grey or similar.... or some simple fade from grey to white/black/whatever if you want to keep it interesting but still b&w.
I should've specified that I meant that as an example of how to manipulate line height in CSS. The 16px was just meant as a placeholder.
Our first game is now available for free on Google Play: Frontier: Isle of the Seven Gods
Orik--site looks good though, just trying to give you the advice you asked for, hope it's not taken personally. The basic structure you are using is very clean & nice (Code-wise) and a great job. You've done some good work here.
LAST thing I'd recommend is making it clear that the CV is a pdf--maybe writing pdf in small letters next to it/etc--or just converting it to html with a link to the pdf document in line with the page.
and Orik, these are problems that every web developer runs into with their early commercial work. I'm sure at times it was and is and will be frustrating, but it is also an extremely rewarding career, and I wish you great luck.
one thing - which favelet did you mean? there's a bunch here.
and, unless I've forgotten something, the only time I used ems was in the p style for line-height, which means it should still work for the purposes of leading, right?
i mean, percentage styling runs into the same inheritance issues, i was just making sure my understanding is right.
The only thing allowed inside ul-s is li-s. You can't just dump a div in there.
The only other thing I noticed is in the text:
You shouldn't really need the <br /> there. By default headings of different numbers will wrap onto the next page anyway.
Anyway, I suppose I'll start with the general and less code-based, and move into the code from there.
I think that's it; hopefully it is, anyway. At the length this thing's at, I hope there's something useful and unique here (I know that at least a couple of the things I've said were mentioned before, and more briefly).
EDIT: Hmm...now that I've seen your CSS, a couple of odd things do stand out.
I actually have no idea why the hover effects don't work - in fact, none of the a.(whatever) selectors seem to be working, which i found out when I tried to do text-decoration: none & change the active/visited links' colours. the only one that does is the overarching a, which I compromised with when I couldn't figure out how to get the rest to work.
EDIT: And while it shouldn't be causing the problems with Calibri, your h1 font-family definition needs some quotation marks.