👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Mockups Font Takes it First Steps

· Posted by Mike in Products and tagged · 20 Comments

The first version of the Mockups font is now out in 2.1, and I think we have a good start at eliminating the clipping issues we had using Comic Sans on Windows and Chalkboard on the Mac. In case you missed it, you may want to check out the Font FAQ before you decide to update to 2.1.x.

We still have a long way to go, and have a good to do list for things that need improvement. Some characters are rendering poorly below 12pt, our kerning pair metrics are not quite functional in the app, and the baselines are still a little off. We're also missing a few unicode characters that I'm going to add. We'll continue to improve it with incremental releases.

For people looking for a way to get special characters into the app, I created a Mockups Glyph Viewer showing all the glyphs the Mockups font supports in Mockups 2.1 and later. The Mockups glyph viewer is only viewable on Webkit/Safari 3.1 or greater, Google Chrome 4 or greater, Firefox 3.5 or greater, IE4 or greater, and Opera 10 or greater. You can copy / paste characters from that page and insert into a text control in the app.

mockups-glyphviewer

Again the link to view the glyph viewer is here: http://balsamiq.com/support/font/glyph-viewer

More to come.

Mike for the Balsamiq Team

Leave a Comment

Comments (20)

  1. Basier, we have a glyph for that, so you could do any of these things:
    – copy/paste it from http://www.balsamiq.com/products/mockups/glyph-viewer
    – copy/paste from a site like http://copypastecharacter.com/graphic-shapes
    – use a tool for getting characters, I use one called PopChar on the Mac

    I hope one day that we’ll be able to use an Insert Special Character menu somewhere. That idea is under consideration.

  2. Hi – what should I do if I want to embed any unicode character like, say, the downward small triangle in a text field or label? http://www.fileformat.info/info/unicode/char/25bc/index.htm

    Thanks regardless for Balsamiq – love it!

  3. Hi, Yasser. You can switch to a system font, but we don’t yet support RTL text alignment, although this is something we’d like to code in the future. As you know, we’re a small team, and we’re not ready to work on that.

    System fonts information can be found on the font faq if you haven’t already looked at it: http://support.balsamiq.com/customer/portal/articles/131378

  4. Hi Mike,

    Thanks for this blog and information contained in.

    We are using the product to develop … you know what 🙂

    We are based in Saudi Arabia and it seems that there is no way to use Arabic characters in developing UI/UX elements. Please correct me if I’m wrong.

    If there is no Arabic characters support, is there any way that you are planning to do so? specially that Adobe Flash/Flex/AIR that you are using to develop Balsamiq is 100% Arabic enabled and it virtually required no real efforts (or R&D) to enable the product to do Arabic or any other language.

    I also do understand that you have developed your own glyphs character set to match the stylish hand-drawn design effects, however if you allow end user to override this restriction by choosing the font they want and allow the OS (or Flash/AIR runtime) to do the RTL and LTR alignments it would be very appreciated and your users based will be expanded by folds.

    Looking forward for your comments.

    BR,

    Yasser

  5. Hi, James

    RE: Font switching in-app
    We don’t have a definitive answer yet about when switching via the app will be available. We want to do something where a fallback method works for glyphs that aren’t included in the embedded font as part of this as well. Switching to Comic Sans will come with the problems associated with that font, so we want the default font to work well. Using a config file will still work, of course.

    RE: Right alignment of text
    I don’t think I understand what you’re seeing. I think what I hear you saying is that the width of the element changes when you load a Mockup made pre-2.1.x?

    Incidentally, feel free to file any other bug reports with us via email at support@balsamiq.com or http://community.balsamiq.com.

  6. Any idea when font switching will be available? I ask because we have a very large project (current count 1783 bmml files). The problem is that the new font is enough of a change that our client will complain if there are differences, so we cannot upgrade until font switching is available.

    I should note that due to the font change that right alignment is out. If you have aligned labels to the right, it appears that the actual coord used internally is the left side, hence the font change affects the width and the alignment is out. Means we have to fix all right aligned text (which would be a royal pain in the rear).

    I doubt if there is any easy solution, but it should be taken into consideration before you introduce font switching. Suspect you will have to change your co-ord system to factor in alignment, also suspect you may need to introduce top/centre/bottom alignment as well.

  7. Hi, Scott. I’d say give it a try first. We’ve had lengthy discussions where many people have voiced their distaste for Comic Sans and we expected a small minority to prefer it precisely because it’s ugly. Early discussions years ago had users pushing us towards a clean font like Architect Small, and that led us to make a clean font that will work with an alternate sketch skin we plan.

    In any case, we are looking at ways to make switching fonts easier, but this will be the default. The good thing is that because we own the font, we can evolve it and give it more character if we feel the need to.

  8. I agree with Thom that the Comic Sans font did a great job of emphasizing the low-fi nature of the mockups, and that the new font is a bit too refined – but perhaps it just takes some getting used to?

  9. Another iteration of clean up is available to try for testing: http://balsamiq.com/products/mockups/next

  10. A first pass of fixes to the Regular and Italic are available to try in the pre-release. Includes work to clean up Diacritics and to add triangles (unicode 25BC Down, 25B2 Up, 25BA Right, 25C0 Left), since we don’t fall back on the system font for missing characters with the embedded font. You can see the results here: http://balsamiq.com/support/font/glyph-viewer

    If you want to try the pre-release, you can install it here:

    http://balsamiq.com/products/mockups/next

    After you’ve played with it, if you want to roll back to the stable release, simply go to the download page and re-install using the Update button here:

    http://balsamiq.com/download

  11. I preferred the look of the comic sans font. Comic really helped people recognize the low-fi nature of mock ups. This one looks a bit too close to a hi-fi for me.

  12. @Jon E: I mean the mainly the symbols and dingbats http://balsamiq.com/support/font/glyph-viewer#dingbats

  13. Mike, what are non alpha characters exactly?

  14. @Tomáš Kapler: Thanks for the feedback. We’ll work on correcting the glyphs. As I say below, I’d like us to eventually have an Insert Special Character feature in the app, so we’ll see how that goes.

    Making the ttf available wouldn’t really help with the bugs this release was intended to correct, mainly text clipping, so that’s not a route we’ll probably take. The font needs to be embedded into the Air app, rather than read from the file system to correct this problem.

  15. P.S.: as i am watching the glypth viewer i just find that the symbols and dingbats are nice, but many of users would not be able to use them as they do not know how to find them and paste them. It would be great if you would add something like char map viewer in balsamiq, or easier – if you would create balsamiq.ttf font (with balsamiq copyright) so we could use standard charmap application (maybe with some link on it in balsamiq), which show all available chars for each font

  16. The new font is great. I love that now the Paragraph of text is no more bold by default.

    The only problem are some missing characters in my (Czech) alphabet (extended Latin):
    É http://www.fileformat.info/info/unicode/char/11a/index.htm
    Č http://www.fileformat.info/info/unicode/char/10c/index.htm
    and this one in wrong (caron in place of ring above)
    Ů http://www.fileformat.info/info/unicode/char/16e/index.htm

    P.S.: offtopic – i have just wrote a small article about how the process of graphical design should be done and i have used a picture of one web build using Balsamiq http://www.seo-konzultant.cz/graficky-navrh-ve-vyberovem-rizeni-na-tvorbu-www-stranek

  17. Jon, I don’t know about making symbols with each glyph separately would work in all cases. I would think people want access to many non-latin characters to put inline, but the non-alpha symbols are another a story. That might be a good thing to put into symbols.

  18. Nice suggestions Martin and Mike, perhaps making a mockup symbol that includes all of the glyph characters, for easy access. I must say, copying and pasting them all at once from the Glyph Viewer doesn’t retain the rows and columns, maybe this is what is needed to keep it in tune with the Glyph Viewer. Any feedback is welcome.

  19. Thanks for the suggestion, Martin. I think it’s a good idea. Ideally, I’d like us to add an “Insert Special Character” function in the app, but until then, this might do the trick.

  20. Thanks for the Glyph Viewer! May I suggest to add a link to it to the Mockups menu? I’d almost be ready to trade in the “What should I make for dinner”-link for it (but only almost). 🙂

    Martin Kessner