I'm building an interface with a lot of info on the screen.. dozens of inputs, with accompanying labels. as a result of the volume of info the fonts have necessarily become pretty small.
but I'd like this to be as readable and usable as possible.. is there a really nice font that's both readable and compact, that works well in a browser (specifically in this case, IE7) ?
anyone have any other tips to sort this out? is there some specific combination of pixel/em size and font, or some other CSS voodoo that can help me out?
this is an intranet app so we actually can be pretty specific.
any suggestions appreciated, thanks.
To have it resized cross browser, use ems. Set your font-size on body element to be 62.5% to make sizing ems clearer. 1.2em = 12px.
Arial is pretty good font. So is Helvetica.
Do you keep accessibility in mind? Isn't it possible to redesign the interface so that less information is shown and people with less than 20/20 vision can easily read your pages?
Typically, sans serif fonts are more readable when used with small sizes. If you want to use a monospaced font, I personally quite like Vista's 'consolas' font.
According to this post from 2006:
http://www.kathymarks.com/archives/2006/11/best_fonts_for_the_web_1.html
Tahoma could be winner:
"Tahoma (Windows). Tahoma was designed especially for legibility on the screen. It's preloaded on Windows systems. Similar in style to Verdana, it is narrower and more condensed"
Related
I know this is perhaps an open-ended question, but I'm hoping some #font-face expert could give me some insight into a best-practice.
At this point in time, is it acceptable to use an #font-face embedded font for body text? I'm arguing with a designer and thinking no, because a FOUT could result in a big change in the layout of the content if a font takes a moment or two to download.
The question is - should I be concerned about the possibility of fonts taking a few moments to download and potentially causing a big shift in the rendering of the body?
Quite late, but here's my opinion: Your main concern with using font-face for body is not the loading time, but the rendering. There are only a (very) limited number of fonts that render well in all browsers and ios. Now, as long as the text is readable (small sans serif with good space between lines) and renders well, there is no real difference from a performance point of view (the font will only be downloaded once, and you can load it before you load your content to avoid any shifting).
I need UTF8-capable reports, and I need to be able to run on CentOS, Windows, and Mac. This is particularly tricky, as the set of shared UTF-8 fonts seems to be non-existent.
In iReport, you can set a single font via a drop-down box, and there doesn't seem to be a way to specify multiple fonts. Is there any way I can use a list of arial fonts to try for a given field? Or is there a better way to support running on multiple platforms?
Normally the correct answer to cross-platform font problems is "use font extensions", and Stefan's link provides the solution.
In your case the requirement for "CentOS, Windows, and Mac" is really a bit of a red herring. Your real requirement seems to be "a free True Type Font that covers all of the characters you will use". If you had that, you could use use font extensions on any platform and life would be perfect.
MS Arial Unicode would probably meet the requirement... except that it's not free.
There's really only one Arial font. It's owned by Monotype Imaging. There are subsets and families and styles... but they are all part of the one Arial. So I don't think the phrase "a list of arial fonts" is strictly meaningful.
But you would probably be happy with a set of N fonts that are all sufficiently similar to Arial for your needs, and between them they cover all of the characters you need. Maybe start with Liberation Fonts, throw in UMing, a little of this, a little of that... Assuming you can find all the fonts you need... you're still stuck. Sorry. You need this feature enhancement to have a way to tell JasperReports to link different physical fonts to one logical font defined as a font extension. It actually came up in a different context (as indicated in the request), but I think it would perfectly meet your needs. Please vote it up.
Until that's available, sites like unifont have quite a few fonts available. Maybe one is good enough for your needs.
JasperReports Font Documentation
- This document describes how to package fonts so you can use the same font on multiple platforms.
I have a site that requires Trade Gothic. I'm wondering if it's better practice to use #font-face or cufon with a font that looks similar to Trade Gothic or just go the image route. Obviously, using images will look better but what is better practice? For example, is replacing header titles with images like below bad?
<h2><span>title here</span></h2>
span { display:none }
h2 { background:url(image.jpg);display:block;height:x;width:y }
It depends on the strictness of your requirement and browser support within your target audience, especially if you want to support mobile devices.
If using a similar-looking font is good enough, the requirement may really be a nice-to-have feature, so anything that degrades gracefully should work. #font-face seems the easiest to implement (just CSS and font files) and it doesn't require Flash or JavaScript (good for mobile users). Google Web Fonts is a great resource or you may even be able to create your own web font using a generator like this one.
You'll have to decide what works best for the majority of your audience and weigh in how flexible the requirement is. If you use a JavaScript-based solution and the audience has it disabled, is that a deal-breaker? Image replacement is not inherently bad, but it can be tedious to maintain if you have much content to worry about (especially if it also changes often).
I use both.
I like to use Cufon for navigation and/or main heading elements, because I think it renders better (specifically in Windows).
For any sub-headers and other text, I use #font-face, so that users may select the text.
I'm currently replacing header images with #font face, as they can load quicker, and text is always more SEO friendly, however you must be careful when doing this as this increases http requests which can then take longer to load. Also there are some legal issue as to which fonts can be used for web.
However it is especially ideal when no other font will do.
FYI browser support for #font face has been available since IE 4, as far as I know.
Well, the most obvious advantage that #font-face and cufon have against the image replacement method that you mention is that they generate your text dynamically and you don't have to create an image for each text that you want to replace.
Take a look here:
https://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js
What are some best practices on enabling a web application to support multiple resolutions? Specifically resolutions that are wide-screen vs. normal aspect ratio.
It doesn't seem like there is an easy answer - other than simply supporting a few fixed resolutions and using some absolute positioning to get the layout to work correctly.
This of course gets even more difficult to make it cross browser.
Does anyone have any good resources of this problem?
You can always try to use a liquid layout structure where the width of your elements are scaled proportionate to how wide their browser window is.
here is a good article explaining different layouts including liquid layout.
http://www.maxdesign.com.au/presentation/liquid/
PS. the above mentioned site (maxdesign.com.au) is using liquid layout itself, so try and change the size of your browser when reading the article.
One fast, simple, fairly robust way is to use a framework like Blueprint or 960gs to lay out the site. They're browser-independent so you don't need to worry about that, and they make most column layouts pretty easy.
They both work on the idea of creating a fixed-size container somewhere between 900 and 1000 pixels wide for your content. Most people run in at least 1024x768 nowadays. If you need more width than that for your content, you're probably doing it wrong.
The one area where ~960px might not work is mobile phones... but that's what mobile stylesheets are for, right?
In Opera and Safari (esp. their mobile versions) you can use CSS3 media queries, which let you declare completely different styles for different screen resolutions.
This can be emulated in other browsers using Javascript – Alistapart: Switchy McLayout
You can use percentages to set width and heights also, but this is also difficult sometimes.
You have two options here:
Fixed Width Layout
Flow Layout
Both have benefits and drawbacks, and in the end, it's a design decision as to which is the best choice.
Although I'm specifically interested in web application information, I would also be somewhat curious about desktop application development as well. This question is driven by my work on my personal website as well as my job, where I have developed a few features, but left it to others to integrate into the look and feel of the site.
Are there any guides or rules of thumb for things like color schemes, layouts, formatting, etc? I want to ensure readability and clarity for visitors, but not be bland and dull at the same time.
As for my knowledge in this area - If you hand me a picture, I have enough knowledge to reproduce it on the screen, but if you ask me to design a new interface or redesign an existing one, I wouldn't know where to begin.
Usually, each operating System has user Interface Guidelines. For Windows, have a look here. (Edit: The links in that post are broken. But a Search for "User Interface Guidelines" on MSDN has articles about everything)
Apple has it's own as well. Also, you may want to keep accessibility in mind.
One tip to check if your colors have good contrast is taking a snapshot of it and converting to grayscale. If you can't read something, colors were surely bad choosen.
Plus, although it's not about user interfaces, Before & After Magazine can give you some pretty good hints about color, design and related topics. It even has got some free pdf's to download.
The book Designing Interfaces, by Jenifer Tidwell has a entire chapter on the subject (Chapter 9, excerpts accesible online).
The entire book is worth recommending.
For web UI, I'm going to go out on a limb here and say that the most important color in web design is white, or "light". This is the color on top of which you place dense tracts of content.
Dark text, light background, always, when it comes to your primary content areas.
And the most important rule in layouting is whitespace. Let the content breathe.
Following these two simple rules is worth more than most "user interface usability" guidelines.
And by the way, the MS user interface guidelines are (by and large) horrible. Read Jakob Nielsen, look at Apple design aesthetics, but stay away from the MS "neutral gray/blue crunchbox" 12-step Wizard 10pt text philosophy of UI.
(And I say that as a long-time MS GUI programmer)
I'm horrible at finding colors that look good together, so I cheat and use pictures from nature that are mostly the color I want (say, green) and then I use this website to pull out the main color scheme. Generally nature does a pretty good job of setting its own nice color schemes.
Use high contrast color combos; Black text on white background is the best example of a high contrast combo.
A bad combo is green text on red background. It's horrible for color blind people (like myself).
See what your site looks like to a color blind person: colorfilter.wickline.org
As for desktop applications: Whatever you do, do not use hand-picked colors. Stick with the named system colors such as "Window Background", "Menu Text", etc. Otherwise, people relying on OS accessibility features will be locked with your color choices (unable to choose a high-contrast theme, for instance) and to people who like to customize their desktop themes will think your application is fugly.
Here are some simple pointers for usability in your typography. These things mainly address readability and accessibility concerns.
DOs:
Use relative font sizing (em)
Identify language changes within a document using the LANG attribute
Black text on a white background
For headings, use H1, H2, etc. and nest them appropriately
Chunk up content and organize with headings that fit what your users are looking for
Write clear and simple copy
Align left, ragged right
Text-to-background color must be high contrast
DONTs:
Use "click here" or "more" as link text
Use underline for emphasis
More than 2 font-type families
Italics
Blocks of text using all caps
Use true red or true blue text on white background (chromatic aberration)