Font selection mockup: Proposal #2

After collecting some feedback and following some of the threads that have been started up, I’ve decided to do a second thought about my first proposal.

It had too much uncovered use cases, and still it didn’t solved some major problems from the current one. To save some time and try to focus on the UI design issue, I decided to just do an inkscape mockup instead of a working solution.

This proposal tries to solve a few problems, and it’s somehow inspired by gnome-specimen from uws. First, it gives an overview on how each style would  look like without the need to click on each of them, and it grants more space for the preview. It also adds a way to search for certain typeface classes, monospaced, language specific using a thunderbird like search box.

Mockup_font_2

Some problems that I’m not sure how to solve here is, how to properly let people edit the preview text, I think that the entry box on top is fine, but I have the gut feeling that it could have problems. Also, I’m not sure how hard to implement the search box would be.

Anyway, feedback, again, is welcome.

Advertisements

35 thoughts on “Font selection mockup: Proposal #2

  1. I wonder if grouping the fonts in the list by family or (if possible) their primary codeset focus would be a good idea (e.g. showing fonts focussing on international character sets in sections, so a “Latin” section, a “Hindi” section, “Arabic”, whatever).
    However, my main suggestion is the font size – could this not be a textbox with up/down arrows next to it? I think it looks a bit ugly to have 16.0, and a dropdown is never going to give a good range of fractional sizes. I’d prefer to default to an integer value, but be able to type in a fractional one (which I do, because I am very boring about tweaking my fonts 😉

    Like

  2. I don’t like the idea of having a drop down within what is essentially a modal dialog. I opened the font dialog to select a font, and now I have to open the search drop down to find the correct type of font… Makes more sense to me to increase the size of the font dialog (it is modal so who cares how big it is), and make the search area multi-column with the attributes. Then make the search a smart search so “cyrillic” finds all fonts which are named “cyrillic” or have the “cyrillic” attribute.
    Also why the preview text box, just make the display widget an entry box.

    Like

  3. Also:
    I’d move the filter selection to the left (and make it change the icon according to the selected mode) and add a “clear” icon to the right. See Firefox’s search box next to the address bar for an example.
    Other than that: a huge improvement.

    Like

  4. Don’t let them edit the preview text. Don’t make things more complicated than necessary. It is for a quick preview and if you want more you can just apply the font.

    Like

  5. Patrys said:
    > How about “Search for fonts containing these characters”?
    I don’t know much about non-latin fonts and languages, but that sounds like an excellent idea. Just input some text and get all the fonts that support that.

    Like

  6. I’m sure you’ve seen Window’s desktop theme font selection dialog. It shows actual samples of how the desktop will look. You know, it’s ‘usable’. We should just copy it.

    Like

  7. I agree with Wouter: no need for the vast majority of users to edit the preview text. If you want, implement an “extended preview” or “character map” button that pops up something which lets users go into greater depth. Or create a preferences thing which lets the user persistently set the preview text.
    Another idea might be to do a simplified dialog, with a button for “expert mode” which lets advanced or picky users fiddle with all the bells and whistles.
    I think what’s really missing in all of this is that in a real type catalog you might have a human editor who sorts typefaces in a useful way– “Standard Typefaces” “Fanciful Typefaces” “Domain Specific Faces”, “Interoperable Typefaces” “OCR Compatible Typefaces” etc. Having to sift through a giant list of typefaces of varying levels of usefulness is annoying.
    This is a very hard problem. If you haven’t looked at it already, I would highly recommend “The Elements of Typographic Style” by Robert Bringhurst. It might inspire you. And it’s a very beautiful book to own.

    Like

  8. Hi,
    I did a quick search of the net to see what other OS’s/Applications had come up with.
    I found this site:
    http://www.unifont.org/fontdialog/
    This persons analysis is quite good but i do not agree with “the solution” which strikes me as very messy.
    Apple’s selector seems the nicest and exposes more settings then most basic font selectors (which i think is a good thing).
    Here is a link to a screenshot of Apples font selector:

    I also like the collections/categories that Apple has to help sort fonts.
    Anyways hopefully this provides some more food for thought.

    Like

  9. I think that if fonts are grouped into categories, both:
    1) Fonts need to be able to be in multiple categories. This is fairly obvious.
    2) The categories must be objective, not subjective. As an example, fixed-width is objective, while “fun” is subjective. I think Apple has got this wrong. If people really want to be able to classify fonts like that, there could be an option for users to create a new category and add fonts to it (that persist across applications). [For example, a user could right-click on some selection of fonts and choose “Create new category” or “Add to category -> [submenu]”.] Users searching for fonts can then put in category or font names, and both can be found.
    Other things:
    – It might be good if the most recently used fonts were displayed first. Could a persistent list be kept across applications? Or should only the recently used fonts for that application or document be shown? (or some combination of these)

    Like

  10. The hidden category selector for filtering by category (chinesse, bold, script, fun…) is really nice.
    Right click on a font should let you add it to a user defined category, right?
    Some suggestions:
    The list of fonts will be nicer if has two columns:
    [ font name (in regular font) | font preview (the text to be previewed) ]
    When you select one, the list hides the preview column, and the typeface selector appears showing samples of bold, italica, condensed… A < mark in the divisor let you return to the list with previews.
    If you could manage how to add a comparison tool to this font selector will be amazing. I talk about this in the previous post. When you are looking for a font for a project, you usually have to compare several typefaces. I have to do it by cloning the text, and applying diferent fonts.
    If the selector itself allow me to add several fonts to a "selected for comparison" list when you are scanning through your font collection, and let you compare a them at the end, will be simply amazing.

    Like

  11. Looking at your first proposal, I see that you originally thought to display the name of each font listed in its respective font. While I agree with the comments others made that font names should be listed in the system font, to ensure visual consistency and readability, I fell that a quick preview of each font is nice to have, so that one doesn’t have to select the font to see what it looks like.
    One way to accomplish this might be with a tooltip containing a “Normal” style font preview that pops up immediately to the right of the font list, aligned with the edge of the list and the top of the font being hovered over — not with the cursor — so as to avoid obscuring the list (something like http://msdn.microsoft.com/en-us/library/ms228282.CompletionList(en-us,VS.90).png is what I have in mind, with regard to alignment). This tooltip would ideally pop up without any delay when the cursor hovers over the font name, as I don’t feel a delay would serve any genuine purpose here (the point is to have an immediate, no-click preview, after all).
    Anyway, assuming that all makes sense, I think that would be a reasonable solution. I like what I’m seeing so far with your proposals and hope that something like these actually gets committed, as font selection is definitely a week point in Gnome.

    Like

  12. Quote:
    “The list of fonts will be nicer if has two columns:
    [ font name (in regular font) | font preview (the text to be previewed) ]”
    This is similar to what Adobe does:

    Like

  13. First, the preview area is taking up too much space, and takes the attention from “selecting” a font (which would be the most used purpose of the dialog) to previewing it. As someone who deals with fonts a lot, using this dialog would be very tiresome, since I’m already familiar with how fonts looks like – there is no need to show entire previews each font set. Why not make a box that shows the preview set, instead of implementing it in the selection dialog? It would be very tiresome when I have to select a font and I know font I want to use. For example, if I want to use Sans Bold Italic, I’d process less information by simply clicking on “Bold Italic” than scrolling through slabs of placeholder(“a quick fox…” text.
    I think the hierarchal views used on OSX’s dialog is ideal. Personally, I prefer the use of the “Miller’s Column” type UI where ever sorting of information and data is needed, and for fonts, which have extended families, subsets, branched font files and whatnot – this would work great.

    Like

  14. I think another problem is that the font namesa should be written in their own font… I don’t know the names of all the fonts, but I do know -visually- what I’m looking for most of the time. Having to select each font at random to see what it looks like is a huge pain.

    Like

  15. To all the people wanting even faster previews: what if he kept it the way it it, but in the list on the left, you can click and drag down the list, seeing all the fonts you pass over without releasing the mouse button?

    Like

  16. Think about a listbox for “library”. A concept usefull to load groups of fonts already present in Adobe Type Manager.
    Obviously, this kind of things need more work on X side.

    Like

  17. Sorry for doubleposting but an idea came right through my mind.
    Let the calling application set the preview text by the means of a GObject property or something. This way you can select a paragraph in – say – Inkscape and it will automatically show up as a preview text (and by default filter the font list down to the list of fonts that contain all the glyphs used in the preview – just make sure you won’t let people put 2 megs of text there).

    Like

  18. I own copies of Elements Of Typographic Style, as well as the Stop Stealing Sheep book – both excellent books about fonts. Personally, I like the idea of being able to type characters and have the dialog automagically narrow the list to the fonts that support those charsets. Give me a shout if you want to borrow those books!

    Like

  19. I’ll go away after this! 🙂 I am now verging on overkill:
    http://picasaweb.google.com/matthew.joseph.mcgowan/DropBox/photo?authkey=EH0mZfIVF_g#5236743082496076194
    Firstly, the Sample formatting could change depending on the typface selected (italic|bold etc…).
    Looking at gimp i added some ‘advanced’ features, namely font spacing. I doubt gtk supports this sort of thing within the DE atm, but who knows?
    I also added a filter switch in response to Tim Foster’s suggestion.
    My thought is that developers could disbale/enable features based on the level of their needs (much like the gtk color selection dialog).
    Like Gen Zhang said the preview area could be a discoverable editable preview area. So you could type or paste text into the area. Upon doing so the selected font properties would be applied.
    Moreover, when text was inserted into the preview area AND the “Only display fonts supporting all previewed charcters” was ticked, then those fonts not providing a glyph for each previewed character would be filtered out of the font family list.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s