Typography is one of the things that I can never get right when I design the web pages in css, the headings and body text never looks and feels as good as most other websites I see on the web. By this I main that my typography does not feel as readable and spacious as on these websites
I do try to copy the css of these nice looking websites, but I never seem to get the same result (or at lest I never seem to make those techniques my own, so that I can use them in the future). Plus, when it comes to typography, my css is all over the place; if I need to change the style later on, I spend a long time searching for the relevant value
When I first started learning css, I found a lot of tutorials on how to get the page layout correct (static, fluid, navigation left/right) but I never found any thing useful on how to get the right look and feel when it came to typography.
on the other hand there are a lot of book on typography but the don't seem to help on how to get typography looking good on the web.
I am hoping you can suggest some resources, or any fixed approaches that would always guaranty that type will look good on the web
Thanks
This article may be useful: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
You're already doing the right thing by poking around the sites you admire and trying out their css; it's one of the best ways to learn.
In general, when I'm working with typography, the best things you can do to make it look good is to consider three things: contrast, color, and visual hierarchy.
Contrast: If your text is presented on a background with a color that does not contrast it well, it's going to look bad. So bad, in fact, that it may be deemed 'inaccessible'. You can use a tool such as Colour Contrast Check to make sure your text complies with Web Content Accessibility Guidelines.
Color: You'll probably find that most of the site you enjoy don't have truly black text. Pure black isn't commonly found in nature, and black text on a white background is the highest contrast you can get, which can look a little harsh. Most sites tone it down by making their black text slightly gray, with css such as color: rgb(30,30,30);
If you want to use colors, try to pick ones that work well together using basic color theory. Either that, or pick a nice dark color and stick with black.
Visual Hierarchy: Basically, use bigger fonts for more important headlines. So an h1 will most likely be your biggest piece of text, with each size going down all the way to h6, and anything else in p tags should be roughly the size of the text you see here. Webdesign Tuts just recently posted an article on visual hierarchy that was pretty good.
Hope that helps!
Related
I see a lot of designers that make shapes on the website. For example, a curvy purple line like shown in here: https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs3/146762996/original/c5c40fc15550b852236414d3984f178e6b976e51/create-a-unique-and-creative-website-for-your-brand.png
My question is, assuming that I am a front-end developer and my boss gives me the files from the designer and asks me to implement this design into the website, how do I do that?
Is it just a one picture that I will get in many different width's and will have to use as a background and fit the text in with breakpoints?
Sorry if that sounds like a stupid question, but I always wondered about websites with weird shapes
For "weird" shapes you can always play around with the clip-path property. Mozilla's dev tools give you awesome ways to play around with it and create a customized shape
I've been learning to code for some time and I've sure learned quite a lot, but styling has always been a pain in the ass for me (it's very embarrassing, I know). I absolutely have no idea how many pixels a nav bar should have or how wide any component should be. If it's just too small/big for me, I'll resize it. Size units? No idea. Don't get me wrong. Percentages, ems and metrics - I'm aware of its existence and what they do, but I do everything in pixels. I'm not saying that things I code look horrendous and not responsive. It's all try and error until things look aesthetically pleasing and it takes me so much time to make things look pretty.
Let's say I need to make something simple like a popup modal in CSS. I might wrap the hidden content in a div, with a class of modal, its content in a div with a class of modal__content, make a button to close it and some text in it. Semantically correct HTML is not a problem. Animations and colours? Fine, you got it. I just have no clue how to style it. That's when I realise I know CSS just in theory. I can code it, but I just have no idea if the modal should be 300x200 px box for a desktop screen or maybe use percentages?
If you have some saved articles or a book you could recommend, I'd be very very grateful.
I've used Bootstrap and Semantic UI. These are very cool and convenient tools, but I wish to know some in-depth guidelines when it comes sizing since I don't really know what something should actually look like. Most of the time I'm just eyeballing all font sizes, paddings and margins etc.
I'm not a good at graphic design either. Few people excel in both graphic design and in programming/scripting.
SitePoint has some books worth reading on the subject, the first especially (each available in paperback and as an ebook):
The Principles of Beautiful Web Design, 3rd Edition
Sexy Web Design
The Universal Principles of Design is likely to cover topics such as those you're asking about, although I haven't read it.
Graphic design relies a lot on convention (which is usually a good thing), fads (less so), and the preferences of the designer and client. However, there are various guidelines that are important to know. I'll mention a few here.
Large or bolder type, motion (videos and other animations), and contrasting borders and backgrounds draw the eye. Be careful not to give such visual emphasis to too many elements at the same time. (This is a common problem for home pages of organizations that many factions competing to highlight the thing most important to them.)
Adjacency implies relationships. For example, it's typically better to give headings, e.g. <h2>, a larger top margin than bottom margin.
Elements tend to need a comfortable amount of space between them without using too much screen space. When large spaces between content sections are desired, it's usually best to scale them down for mobile devices.
Animations serve multiple purposes. There are the various pulse/"throbber" animations to indicate that content is being loaded or some other kind of processing is taking place. There are transitions that show a non-instantaneous change between states, e.g. a menu opening/closing or change is views of a content/image slider. While others are mostly for aesthetic reasons, to add visual interest.
I'm glad you mentioned semantics. Do you use <label> elements where appropriate?
P.S. Too many people who call themselves "web designers" don't know, or refuse to acknowledge, the differences between graphic design for the Web and for print.
A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.
A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.
This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.
I really want to find this article again but I can't seem to find it :(
I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!
I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:
http://fontawesome.io
http://icomoon.io
There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers
It seems like there is an increasingly popular trend to style hyperlinks in a color that's barely distinguishable from body text. I noticed this just the other day on an SFGate blog page. Also notice that link just a few words ago. Are my eyes getting worse, or is that hard to spot?
I certainly understand styling hyperlinks to look better than browser default styles. But, if they're not easy to see, what's the point of having them in the first place?
My best guess is that designers (or whomever makes the styling decisions) are wary of interrupting eye tracking with colors or other styling that is significantly different than the body text. That would make some sense, but I feel that there's a lot more room for compromise - i.e., styling links to be different enough from the body text that they're easy to spot, while not making them so flashy that they attract the eye to the detriment of easy reading.
Would anyone make the argument that subtle hyperlinks are more effective than more obvious ones? Or, can you point me to any theories or testing conclusions that may justify their use?
#Mike Daniels: Thanks for clarifying that the color I'm having trouble differentiating on this site is the visited link color - I hadn't noticed that, but you're right. The unvisited link color is rather prominent, and it makes more sense to me that visited links would blend in more with the surrounding text.
On another note, I'm not sure that I buy the argument that a hover color/effect is enough to properly distinguish a hyperlink. I don't feel that it serves the cause of usability that a user should have to hover over a link to confirm that it is in fact clickable. I think that should be made obvious at a glance.
I actually have a very good IPS-panel monitor and near-perfect vision with my glasses on. I can see the visited links on this page and those on the SFGate blog if I scan for them, but my argument is that it would only take an underline, a different color, or another visual distinction to make the links stand out much more.
What I'm really wondering is why - assuming that the designer(s) on a high-traffic site like SFGate know what they're doing and have made conscious decisions about link colors - they would choose to style the links to resemble the body text so closely? Is there reasoning behind that?
I can see the reasoning behind not wanting to have hyperlink styles which strongly clash with the regular text, as they can be distracting while reading. But I think that's rarely a problem. If you look at a site like Wikipedia, the links are very visually distinct from regular text, but it doesn't at all make the text harder to read
So the only real reason to only subtly differentiate inline links from standard text is for aesthetic purposes. I think that's what the SFGate designer has done. The link colors they use are easily differentiable when they are not inline (e.g. the Recent Entries or Categories panes), but they are perhaps harder to pick out in the text.
Since they've already carefully chosen a good color scheme that works aesthetically, and you generally don't want to employ too many different colors in a design or use different-colored links in different places, there's not a lot of options. They could have:
bolded the links
underlined them
used dotted underlines (a nice compromise)
or use rollovers
All of which would help to differentiate links from text without needing to give the links a brighter color.
But you also have to take into account the type of page it is and the usage pattern of visitors. If you have a lot of inline links, or if users are mainly there to read an article, not follow embedded links, then you don't want the links to draw so much attention. The SFGate blog is more akin to a digital newspaper. It's not a standard news blog where links are the primary content, or Wikipedia, where the embedded links are also a major focus of the site. Basically, the few links in the blog posts are only there to provide a little supplementary info for the curious but are expected to be ignored by most readers. And they do stand out enough so that while reading the article, you will see the links as you come across them.
The main navbar is readable , and the sub-navbar is normal text with a while background giving the main navbar visual hierarchy. The page is actually alright.
It depends on what you're trying to accomplish. As a site owner, I might realize (via A/B testing) that a subtler link color increases CTR, reduces bounce rate, etc. .
I do, however, think that differentiating your links only by color might cause some problems for colorblind folks.
ok, in SO the visited hyperlink colour is a bit darker and is harder to distinguish from the unvisited hyperlink colour. But I think inline hyperlink design is a tough question to answer. I mean you want someone to know the hyperlink is there but at the same time, is it more or less important than your content? if its the ultimate destination then maybe making it stand out more (i.e. by underlining it) if its evidence for a point and therefore less important that someone clicks it theres no need. I'd argue a simple colour change would do, maybe make the visited/unvisited links a closer match so that they maintain their visibility in the content.
I didn't realize until Mike Daniels pointed it out that your issue is with visited links, not normally-colored links. Visited links have traditionally blended in more, it's not really a new concept. I think the theory is if you've already visited the link you must know it's there, so there's no reason to draw your attention to it anymore; there are other links you haven't visited yet that you're likely more interested in
I can clearly distinguish the link color from the text color. Maybe you should adjust your display settings? I suppose it could be a bit bolder to distinguish it from the surrounding text, but it's ballpark.
It would be nice if the SFGate blog page page used the hover property to provide another visual cue that the thing that I think is a link is actually a link.
Could be one of 2 scenarios, both of which I have experienced.
the design agency isn't web savvy and thinks that different coloured texts and (worse) underlines are unsightly and has asked the designer to make the links visibly uniform (you'd be surprised how often I get asked to do this).
the text has been SEO'd incorrectly by someone who's about 6 years behind the times and believes that you have to link every instance of a term on a page but with a consideration for the visitor, so they've been styled down.
I'm curious if, similar to something Chesterfield said above, someone is under the delusion that they should link lots of stuff on the page in order to improve their search engine rankings. And, because of that, they thought the page might look less ugly if they toned down the coloring of links so that they're more to game Google than for end users.
I'd be curious to see some stats for the number of links per article for under-emphasized links versus articles where the links are clear. Obviously it wouldn't be 100% scientific, but it might lead to more clarity on the issue.
maybe this could be a nice soloution
a {
font: inherit !imporant;
text-decoration: inherit !imporant;
color: inherit !imporant;
}
Having asked this question How to reach CSS zen?, I now understand that the issues I have are mostly related to positioning. I've found some articles telling that CSS is not always good enough as a layout system.
http://echochamber.me/viewtopic.php?f=11&t=40154
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/dont-abuse-css-for-page-layout/
Do you as CSS designers limit yourselves upfront to designs that CSS can handle? Should I avoid things that seems perfectly easy are in fact difficult to do with CSS?
Of course you limit yourself. As a designer, you should always think about the medium you're working with. If I were designing a magazine ad, I wouldn't be thinking about animations or video. There are certain rules you must adhere to, and it doesn't make sense to ignore that.
But of course, rules were always meant to be broken.
Why?
If you are "designing", why would you limit yourself based on a the limitation of one technology? When you design your site, you should always try to achieve the most usuable interface for the user.
If you do limit yourself, then you are just asking for the site to not be used, and then what's the point of creating it?
I don't limit myself upfront to any designs that CSS can handle (within reason of course), just figure out your design and there will be someway that you can get it looking right using CSS, but it might involve a lot of hair pulling, especially if IE6 is involved!
When implementing a web design (assuming I've got an image/drawing of what the site will look like) I always follow these steps:
I look at the design and determine what components it has. Examples are navigation areas, headers, content areas, and so on.
I implement (X)HTML that can represent the content areas without really taking the design into account (there are certain things such as content order that I use the design to determine.)
I start making the CSS and images needed for the site to look the same way it did in the original design document. Depending on the complexity of the design, I might come up short of elements to use for styling the page, and may end up adding elements that don't really make sense for the content. I try to avoid it as much as possible, though, and I try to create the elements in a way that isn't obtrusive to the content.
As you can see, I never limit the design to the capabilities of CSS. CSS comes last. Now, depending on the complexity of the design, it might not look exactly like it did in the original design document, but the goal is always to make it as identical as possible, while still maintaining clean HTML so that the design can easily be updated in the future.
Most layouts I find can be done with CSS. There are a very few exceptions (normally to do with verically centering text).
For me the main factor which limits my designs is a reluctance to use huge background images. If an effect can't be done by combining/repeating a few tiny bg images I tend to reject or tweak it. Eg a diagonal gradient on a box with curved corners which could be any height might fall into this category using CSS2.1
Almost every painter limits themselves to paint on canvas, almost every sculptor makes 3D shapes from stone or clay or metal...
But there's also the few who dream new dreams and create new things. Some flop, some shine.
Should you limit yourself based on what CSS can do with layouts? Not completely. I say dream big.
Once you've got your dream design, either figure out how to create it, find a technology other than CSS that can do it, or go start inventing!
You can do absolutely almost anything using CSS 2.1 as far as layout. Its a complete pain in the ass that has no reason to ever exist, but you can do rounded corners (using background images), gradient backgrounds (more background images) and all kinds of other bloated crap you don't need all together and still not completely destroy the semantics of your HTML.
Doing all that garbage and still attempting to be standards compliant reduces usability, because its the designers who need round corners and other frivolous crap and not the users. Usability tests have confirmed this. Sites that are bloated to accommodate presentation and usability at the cost of semantics and efficient fail in usability tests compared to their competition. I work for a website that gets several million visitors a day and I have seen the results of our usability tests.
CSS provides a very good way to create an overall design that easily can be changed by small changes in one CSS file, and instantly applies the design changes to all your pages. Of course there are things that are tricky to do with CSS, and in those cases you might want to do it in other ways, but even if your layout is mainly based on CSS, doesn't mean that you can't do some special parts using other technology! You can mix!
So you don't limit yourself when you go for CSS. You just make use of a powerful technology that can be used in perfect harmony along with others!