Lately I’m sucking at getting anything useful done code wise, somehow every time I spend like more than 20 minutes in front of a computer I feel like running away from it. That’s even more frustrated when you have like a few set of pet projects in mind that you really want to get in speed and show something useful.
One of these projects is a rework of the Gtk+ font selection dialog, which currently sucks usability and aesthetically speaking.
This is a list of things that are wrong with this particular dialog in my opinion:
- When you select a particular style, and change the font family, it gets back to whatever default style it has.
- You can’t guess how the font looks like until you click on the family.
- The size could use an editable combo or spin box instead of a treeview. A slider feels also quite nice but you can’t edit the value manually.
- There are too many scrollbars in that dialog.
- The treeviews takes a lot of unneeded space in detriment of the treeview.
- It looks soooo 90’s! Okay, that was subjective. But still think so.
- You cannot intuitively search for fonts by name or look after Monospaced fonts.
I started a small prototype in pygtk to investigate how to improve it, now, I’m not a font expert, so I’m willing to get any possible feedback so that I can shape up a good replacement. Anyhow, here you have a screenshot on my current work:
Now, this prototype doesn’t cover all the use cases yet, there are more style properties than Bold an Italic, so a combobox with non bold/italic supported styles would be needed though. I’m not too convinced about the preview lay tout either. Anyways, comments are welcome.
If you want to try it, grab the current snapshot of the code, however note that some of the intended behavior is not yet implemented (such as preserving style and size on family change and search).
Silicon Island 
Categories would rock, especially in combination with gnome-specimen enabling custom categories for power users ;). I think apple calls it collections.
Also check out:
http://www.guidebookgallery.org/screenshots/font
and
http://www.unifont.org/fontdialog/
I do think it’s a good idea to keep the font list name uniform. No special font rendering of font name. Categories would help solve the problem somewhat.
What really bothers me is the AL* names……. It’s sooooo annoying. Arabic fonts showing up in at the top of list when my locale is ‘latin’ is quite annoying.
Sorry for not just doing it 😦
LikeLike
Wow, great work you have done there!
I really wonder what happened to all the work Ed Tranger has invested in the font selection dialog: http://www.unifont.org/fontdialog/#theSolution
This would look so cool …
LikeLike
See my suggestions 🙂
http://blog.squidy.info/2008/08/14/a-new-font-dialog/en/
(I’m not sure you have ping back activated on your blog).
LikeLike
I was really impressed with the dialog mockup posted recently for in the desktop resolution independence thread on gtk-devel. Instead of a list of sizes, it had samples of the font at different sizes for you to choose.
LikeLike
Using buttons and uniform names only works for fonts that only have two weights (normal and bold), which is usually true of cheap/free fonts, but not true of many others (there’s often a whole spectrum in professional fonts: light -> normal -> medium -> bold -> black, for example). Most word processors just offer a bold button, but having a feature-complete backing dialog means that there’s at least *some* mechanism for accessing all of the weights available to a particular font.
Of course, it may be that everyday and professional font selection dialogs have needs that are so fundamentally different that they should be separate. It would be cool, for example, in a “pro” dialog, to also offer OpenType features such as old-style figures, true small caps, stylistic alternates, enabling/disabling of ligatures, etc., even though that would likely be overkill for most users.
LikeLike
@Andrew:
yes, I realized that use case recently, however, for those fonts not providing bold or italic or bold+italic, the buttons can become insensitive, and the other styles can be provided through a combo box instead of a treeview, that saves a lot of space and it’s more convenient for the common use case IMHO
I’ll try to implement that next time I spend some time on this
LikeLike
I cannot agree with the idea to drop the font style selection list and replace it with two buttons bold/italic. There are fonts, which have different shapes for Italic and Oblique, and others additionally have Condensed styles (see Nimbus family).
The gnome-specimen mentioned in the first comment has an interesting font family selection combined with styles.
LikeLike
Someday, I hope someone implements simple TAGS for typefaces. There are just so many typefaces available… The user should be able to categorize them into “business”, “edgy”, “playful”, etc, and use those categories from within the font selector.
LikeLike
You should use checkboxes for bold/italic, not buttons.
LikeLike
Note that for Latin fonts, your dialog previews them by drawing their family name with them (see TSCu_Times in your screenshot).
The first problem is that in many non-Latin fonts such as UnDotum, the interesting characters (that one wants to preview) are not in the Latin part and thus are not in the preview. So in this case, you want to print something more interesting in the preview. See how OpenOffice.org prints a few glyphs in the drop-down box for symbol fonts.
Another problem is with fonts like Math3 or cmsy10, which don’t contain Latin characters in their Latin part. So, you certainly don’t want to display the name of such fonts with the font itself.
LikeLike
Great to see you, and it seems others, looking at the fonts dialog. I’m involved in localisation and font selection for translators is important for me.
Things that I need from a language point of view are:
* Language aware: it should be able to filter fonts based on a number of language inputs. My locale, the document I’m editing, etc. Fontconfig nows what chars are required for a language, also CLDR has that data. E.g. in Venda, although it uses mostly Latin characters, I need ḓṱḽṋṅ whichnot all fonts have, I’d like to simply see which fonts can cover those characters.
* Filtering on style: show me all fonts that are a certain style, serif, sans, etc
* Don’t limit me to bold or italic rather show me the data
* Show me some sample text, as you did or if I’ve selected some text show me that. Allow me to change that text if needed. Rather show the sample text based on the language I’m editing.
* Allow me to compare my text in various fonts side by side.
Just some ideas.
LikeLike
Please don’t take away the traditional style selection. I’ve got a font family that features:
Roman,Semibold,Bold,Italic,Semibold Italic, Bold Italic, Small Caps, Bold Small Caps (I think), Italic Old Style Figures, Bold Italic Old Style Figures, Ornaments
LikeLike
The single feature I would kill for is filtering – in particular the ability to show *just* the monospace fonts.
Other than than the obvious clunkiness, going back and relearning some lessons from xfontsel might even be a good idea (so long as you don’t *need* to understand all the complexity of fonts just to make your desktop look pretty).
LikeLike
The problem with rendering the font name in the font itself is that many fonts don’t provide the glyphs to render their name. This is true for symbol fonts but also for fonts covering other scripts. Please don’t do that. Except of course your goal is to provide a font selector for screen fonts. Then you would beforehand limit the list of fonts to the fonts that cover the current locale.
For the preview, you might want to look at the code we have in GIMP that selects a preview text based on the coverage of the font. It’s heuristics only. But it helps to solve the major drawback of the GIMP font selection pointed out in http://www.unifont.org/fontdialog/
LikeLike
Also look there:
http://bugzilla.gnome.org/show_bug.cgi?id=407885
LikeLike
Just giving my 2 cents here, but there’s nothing wrong with the current Gnome Font selection dialog. I actually much prefer it to XP and KDE’s. The only thing missing is the search entry.
Here’s some issues I have with the new mockup.
> The text preview space takes too much area. Not to mention that it’s presence is made redundant by the previews being made in the font selection list. Why display them twice?
> There is far more to a font family than bold and italic. Like someone else already mentioned, there are numerals, condensed versions (and then their subfamilies of bold and italic), Small Caps (and their subfamilies), so on and so forth – all information that is nowhere to be found in the mockup, and is already listed very neatly in the current dialog.
Now that I think about it, the only think missing with the current dialog is a search entry box, which makes sense to put there.
LikeLike
That is so much better!
One point though, sometimes there are more variations then Bold and Italic. Some fonts have “Condensed” for example. Maybe you can have the variations in a expander of the parent font in the treeview, so you don’t need those buttons at all.
Love to see this in the next GNOME.
LikeLike
Honestly, I don’t see much point in this. You dumped a listbox that displays all faces of a font family in favor of a row of buttons that definitely won’t cover all possible names of faces. Do you actually know there can be up to 20 of them? And you want buttons for them? Holy Jesus. Please rethink your approach.
LikeLike
@Alexandre:
Now, that was a constructive critic.
LikeLike
My approach would be somehow different:
* keep the filter box but replace the drop-down arrow with a clear icon a’la libsexy
* always draw family names using the current system font, add a separate column for preview (a lot of artistic/decorative/dingbat fonts would make the name either unreadable or completely blank)
* drop the style box (see below)
* replace the preview box with a list of selectable previews of each style (style names are irrelevant here and I think that’s the only sensible way to let users pick between styles “old book” and “condensed” without providing random translations in GTK+)
* size could be an editable combobox (or a spinbox inside combo if that’s possible with GTK+ – haven’t checked) – it should also be placed above the “style” box to affect the previews
LikeLike
@Alberto
But what do you actually expect? 🙂
You send a working solution to drain and replace it with something clearly not flexible enough.
I’m all in favor of enlarging preview area, but the price you’ve chosen is too high.
And the “for those fonts not providing bold or italic or bold+italic, the buttons can become insensitive, and the other styles can be provided through a combo box” solution sounds like a decision that doesn’t have a HIG bit in it by design.
Why not start the overhaul with a list of thoroughly created usecases just like everybody does?
LikeLike
One suggestion: instead of using a straight alphabet dump for the preview how about using a) the contents of the clipboard, if it’s been filled by the app that’s popped up the font-selection dialog, or b) lorem ipsum[1]. Using lorem ipsum gives you an idea of how the font looks when used “naturally”.
[1] http://www.lipsum.com/
LikeLike
It’s great to see your efforts in improving the font widget! Thanks!
How about grabbing the information from fontconfig (like fc-match -v) to add the corresponding tiny icons to the right of each menu entry to display features like weight, format, availability of smart features, etc. (A tooltip could explain what each icon stands for and give more details). That would be immensely useful.
A bit like Ed Trager’s research suggests: http://www.unifont.org/fontdialog/
Flagging up the metadata about the foundry or designer and if the font is open or proprietary would also be very cool.
LikeLike
@Alexander:
No, it’s just a prototype, how would you improve it? You didn’t bothered to read the comment thread where I acutally point that there are use cases not covered yet. Where did you get the idea that the prototype is finished or that it actually looks any close to the ideal solution?
LikeLike
@yosch:
Some apps might also like to display the license (think GIMP and Inkscape).
@Alberto:
For my idea outlined in the previous comment – see Speciment just remove the add/remove/clear buttons and instead of having expandable fonts on the left automatically replace the preview pane with all the available styles. Also add a relevant preview graphic to the list (icons as proposed by yosch would also be handy).
LikeLike
1. As many people said, bold/italic buttons are a horrible idea. Such a classification only applies to the most basic font files for Western alphabets.
2. Font previews in the font name – I don’t recommend it. First of all, some fonts (Webdings etc.) replace letters with random symbols. The string “Webdings” actually rendered in Webdings will look like nonsense. Second, assuming you can somehow take care of the Webdings problem, you will still need to be very careful about performance. In my experience, for example Abiword’s font selection with preview can be painfully slow on older machines once you have enough fonts. You do not want to make GTK unusable on low-end devices.
3. Highly useful feature: a multicolumn font list! A single column is a very inconvenient way to navigate a sufficiently large list of fonts.
4. Highly useful feature: add a way for filtering based on script. Out of the dozens of fonts on my machine, only a few support Han characters – what if I want to choose one of those?
LikeLike
It’s too simplistic, and does have major drawbacks.
– Font families are able to have N typefaces (not only bold and italic). It should be into a list.
– Selecting size from a spinbox is a pain. It should be into a list.
– Rendering the font name with the actual font makes the name illegible for various fonts and makes for a poor preview. Don’t do that.
It doesn’t solve the main problem (categoring fonts by similarity, like monospaced, sans-serif, serif), and creates various others that the current dialog don’t have.
Basically, what a good font dialog should enable is:
– Selecting fonts by name, by typeface (regular, oblique, bold, semibold, extended, etc), and similarity
– A fast size selection
– A big area with a nice preview, for the selected font in the current size and typeface
Keep those things in mind.
Other than that, nice to see you want to improve a somewhat neglected part of the Gnome experience 🙂
LikeLike
Check out http://brainstorm.ubuntu.com/idea/5897/ for another font-selection idea…
LikeLike
@Alberto
I’m not taking this as final design, of course. But i see where it’s heading and I don’t like it.
Look, Panose-1 (check your mailbox for that ;-)) alone specifies 11 levels of weight and 9 levels of proportion (condensed, expanded etc.)
Keep in mind that many type foundries use their own naming scheme which doesn’t overlap with panose to 100%.
Then there is the whole thing about oblique and italic faces which are not the same thing.
And caps enabled faces… 🙂
So you are basically down to several characteristics, not just weigh and slant.
LikeLike
Alberto, check my proposal, I just gave it a shot too:
http://hcalves.com/blog/2008/08/17/font-dialog-proposal-gtk/
LikeLike
* The bold / italic buttons make no sense. Many fonts have more styles.
It could be replaces as someone suggested by a list with the real representation of the style.
A current problem with the current font selector is that if you are looking for bold fonts, when you select other, the bold is deselected.
* The list of fonts should be shown with the same tipography.
I suggest to show two colums:
[ font name | Preview text with the font in question ]
The preview text will be nice if could be changed. Usually you are trying to look for a good font for a particular text.
The apple editable “collections” are really nice. Being able to detect and clasify at least some into script, bold, serif, sans will be great too. When you have thousands of fonts current desings are a real pain. A solution similar to file dialog, with some default locations an other user editable will be great.
* Being able to mark some fonts for comparison as you navigate throw the list will be amazing. “Mark for comparison” for add to the selected list and “Compare selected fonts” will show a big preview of the text with each selected font. That will ease the selection of the final desired font.
LikeLike
PLEASE remember to check the performance on a 100mhz pentium / 4 Mb ram with 1000 fonts installed.
Please don’t force massive hardware upgrades on us all just for eye-candy, thanks. Maybe default to cheesy and have a preview button…
LikeLike