Canonical Voices

Posts tagged with 'typography'

Paul Sladen

Some of original sketches for Ubuntu Arabic are about to go on display in Berlin! We’ve talked before about the work done by Rayan Abdullah on drawing and designing the original calligraphy behind the Ubuntu Arabic for the Ubuntu Font Family and from tomorrow you will be able to see that work for yourself.

Until 27 May 2012 you can see some of those original sketches and designs featuring in the Typobau exhbition at the Körnerpark Gallery in Neukölln, Berlin,

It includes many of Rayan’s design projects from the last decade, including the Bundesadler (the Federal Eagle of Germany) and his many Arabic graphic design and typography projects including the logos and typefaces for Burberry, McDonalds, Nokia Pure Arabic and the Ubuntu Font Family Arabic script coverage.

For keen visitors, the grand opening is this week, at 19:00 on Friday 20 April 2012. Or for anyone visiting Messe Berlin in May 2012 for Linuxtag 2012 you will still be able to catch the exhibition. Just take the S-Bahn ring anti-clockwise to S-Neukölln and see Ubuntu and Rayan’s exhibition at the same time as Linuxtag!

The “Typobau” exhibition runs between 21 April 2012 and 27 May 2012, 10:00–20:00, Tuesday—Sunday, at Körnerpark Galerie, Schierker Strasse 8, Berlin-Neukölln

Read more
Inayaili León

If you’ve ever had to create Ubuntu or Canonical related design materials, chances are you had a look at the Brand Guidelines, which, until now, have only existed in the form of bulky PDFs. Those days are over, as we happily introduce the brand new Ubuntu Brand Guidelines site, where you can read the guidelines and download the assets necessary to create your projects.

Ubuntu Brand Guidelines homepage
Ubuntu Brand Guidelines homepage

You can learn more about the Ubuntu brand values and the brand assets, such as our logos, colour palette and pictograms, and how to use them. You can also consult some of our Web-specific guidelines, look at examples of design work that has been done, and download assets like the logos and pictograms.

Ubuntu Brand Guidelines - Brand assets section
Brand assets section on the Brand Guidelines site

This is the first iteration of the site: lots of content is being prepared and will be added later on, and we will also work on some refinements to the asset download process, as well as adding many more useful downloads, such as templates and photography.

Among the more frequently requested assets are HTML and CSS snippets and templates that can simply be copied and pasted on internal and external projects, so the designer or developer can be certain everything looks as it should. This is in the works, but it’s something that takes a little bit more time to get just right, so please bear with us.

For now, we’d be delighted to get your feedback on this first version: have you found anything particularly useful on the site? What would you like to see there that you think it’s missing? How do you think it can be improved?

We hope we enjoy the online Ubuntu Brand Guidelines!

Read more
Inayaili León

Warm grey is one of the neutral colours from Ubuntu and Canonical’s colour palette. It has been added to the palette for balance, being a bridge between the vibrant orange and aubergine.

The brand guidelines specify that warm grey (hex value: #AEA79F) can be used for: backgrounds, graphics, pictograms, dot patterns, charts and diagrams, and large size text.

Even though its use has been tried and tested on some of our print design materials, we are still finding the best way of applying it on the screen, with accessibility considerations in particular being something we want to get right.

Ubuntu Server brochure
Warm grey used in a brochure spread and diagrams

I made a quick example of warm grey text on white and buttons with white text on warm grey and showed it to the Ubuntu accessibility team, who promptly gave me some feedback.

Warm grey text on white and white text on warm grey
Example used to showcase warm grey text on white and white text on warm grey

Here are the conclusions of this discussion, and what we will now try to follow as a rule:

  • Warm grey is easier to read on white and at larger sizes, such as 24-36px
  • It can be used for short, less important pieces of information (for example the date or author of a post or news piece below the main title)
  • It can also be used in buttons that are deactivated and therefore less relevant

Guidelines can change though. If something doesn’t evolve, or is at least reassessed at certain intervals of time, it can very easily stagnate. So we will test these conclusions and follow these simple rules for now, knowing that later on we may decide there is a better way of achieving the same results.

Read more
Paul Sladen



To celebrate Software Freedom Day 2011 we got sent one of the banners showing the new SFD logo. The logo design is based around a custom-modified version of the Ubuntu Font Family (the fonts come with source code, and modification is allowed as long as you follow the rules).

There are some photographs showing the development of the logo components, and how it even includes the subtle outline of Tux the penguin, the mascot of the Linux kernel that forms the base layer of the Ubuntu operating system and other Free Software distributions.

Frederic Muller has added more details are on bug #838287, and there’s a case study of the modifications changed from Ubuntu Bold Italic when making the Software Freedom Day logo. Photos from SFD2011 events around the world are starting to appear on Flickr.

Marcus Haslam, brand lead for the Ubuntu project reminds everyone that if you’re representing the Ubuntu brand itself, you must only use an unmodified version of the Ubuntu typeface. This is to keep consistency across the brand.

Read more
Paul Sladen

To join the Ubuntu Monospace beta and give feedback, apply to the ubuntu-typeface-interest team on Launchpad and follow the PPA instructions after being accepted.

Timeline


Hardly a day has gone by in the last six-months without the design team being asking when the Ubuntu Mono monospace is going to be available. Like all of the work on the Ubuntu Font Family, the monospace has been working its way through the phased testing process, gradually being made available to more users, as issues are improved and developed. It’s now at the state where it’s ready to share with the early-access beta team. Depending on how many issues are found it can then proceed to being released via font.ubuntu.com and then finally into a future version of the Ubuntu operating system.

Development on the Ubuntu Mono started back in August/September 2010 with Amélie Bonet at Dalton Maag taking the lead. The Ubuntu Mono consists of four fonts: regular, bold, italic and bold-italic. The full set are true monospace fonts, each character being exactly 0.5em wide and 1.0em high, regardless of the weight. Just like a typewriter there are 12 characters per inch at 12 point. On a typewriter or line-printer, creating “bold” is a matter of printing over the top, building up the ink but keeping the same spacing. The Ubuntu Mono Bold follows this principle.


What took so long?

Making a font takes a really long time, for Ubuntu Mono it has also been necessary to re-learn and re-discover much of a lost-art behind monospace font design; hopefully the experiences from the development (recorded in the bug tracker and design blog) will help others working on monospace development in the future.

In a variable-width font, the letters ‘m’ and ‘w’ are much wider than the letters ‘i’ or ‘l’ leading to two problems. The wider characters must be squeezed to fit, and the narrow characters bulked-out to fill the space. Out of all of these, the Latin ‘i’ and ‘m’ have taken the most time, with many experiments run over several months to try and discern a solution (a compromise is going to be necessary somewhere).


To serif or not to serif?

  • Ubuntu Regular (proportional) on the top line, notice the ‘m’ and ‘@’, both much wider than the versions below. In a proportionally-spaced font the designer has a wide array of options in terms of setting the advance-width of a character, or optimising the kerning by setting customised spacing for certain pairs of letters next to each other (‘AV’, ‘Te’)
  • Ubuntu Mono Regular (fixed-width) in the middle, making characters work is not just a case of squeezing harder! One needs to find a designed alternative: the ‘m’ has a raised middle stem helping to keep the sensation of lightness and space, and for the at-sign (‘@’) the surrounding circle does half a revolution less, leaving the ‘a’ at the top instead of the bottom.
  • Ubuntu Mono Italic (fixed-width) at the bottom, is not just a slanted version of the monospace. The ‘a’ becomes single-storey matching the proportional italic and the letters ‘a’ ‘d’ ‘u’ gain tails in Latin. In Cyrillic Kursive (italic) the character forms often change completely.

The main Latin-based characters that vary are "j1flirt". In the end the ‘r’ was finalised without needing a serif, but the other glyphs have been provided with serifs of some form in order to “fill out” the whole of the cell in which they sit: the numeral ’1′ has a slab serif across the bottom, and for ‘f’ and ‘t’ the cross-bar goes the full width across instead of just the right-hand side. The commas and quotes also gain “typewriter” serif tails.


For more details (along with experimental the PDF diagrams) see bug #677134 (“Style: Mono: discern shape of serifs for i l t “). (Please try to have used the font by testing for one week in your normal use to help filter out knee-jerk reactions).

Where we are now

We need to test the readability of the font, particular the Cyrillic and Greek which have had less testing. We also need to test the technical aspects of the monospace font in as many terminals as possible, including the line-spacing. For this, a set of box-drawing and solid-fill characters have been included in the UbuntuBeta Mono. If working correctly when these are tiled side-by-side each should exactly touch, leaving no overlap and no gap.

This exact 2:1 ratio between height and width means that it can hopefully also be used as an 8×16 bitmap console font. Perhaps in a future version of Ubuntu you’ll be able to see Ubuntu Mono right from the moment the bootloader or CD menu appears! In order to do that, the fonts are being “hinted” to force optimised bitmap forms without “drop-outs” or gaps that appear from the fitting of the complex curve onto a low-resolution grid of pixels. As of this week Jason Campbell at Dalton Maag has handed over his hinted versions of Ubuntu Mono to Vincent Connare for tweaking. The most recent update from Vincent earlier today was “I am reviewing the Monospaced now!”, so hopefully that will reassure everyone that things are a-happening in the background!

Finally, remember that the Ubuntu Font Family is about quality, it’s better that we all get a high-quality monospace font in the long-run than to rush something out of the door too soon. Good things are worth waiting for!

Thank you to a commenter in a previous blog post for inspiring the title.

Read more
Bruno Maag

We are in the final stages of completing the Ubuntu font suite. Unhinted monospace fonts were revealed at UDS in Budapest and seem to have gone down quite well from what I can gather. We currently furiously hinting the fonts to make sure that their appearance on screen is meeting expectations.

We are now putting the two complex scripts Hebrew and Arabic together. Although the basic design of the Arabic was finalised some months ago we have been doing a lot of background work investigating language support, and thus defining a glyph set. This work has led us to have aprox. another 1,000 glyphs in the font supporting languages such as Kashmiri. Our designer Jonathan Pierini currently has the task (some would say unfortunate) of compiling the various glyphs and their diacritics. Whilst doing this we have come across a few situations which we hope someone from the Ubuntu community can help us with.

In Kashmiri the glyph ‘waw with ring’ is used. In the Naskh, Nasdaliq and similar scripts the tail of the ‘waw’ often stretches out downwards which gives the designer the opportunity to attach the ring to the tail on the inside of the character. However, Kufic style fonts like Ubuntu tend to have a more closed ‘waw’ tail shape making it difficult to place the ring on the inside of the character. We have now created a versions that has the ring on the outside of the glyph but are uncertain if that creates a legibility issue. I am of course aware that experience of Latin design cannot be directly transferred to non-Latin design but looking at the Danish a-ring for example, I know that there is some room for interpretation. Normally, the ring is placed above the lowercase glyph, as a separate element to the ‘a’. But where space is tight the ring can be part of the ‘a’ as long as a ring shape is visible and the character can be correctly identified.

A Naskh style ‘wawring’ on the left, Ubuntu ‘wawring’ on the right

Kashmiri (and possibly other languages) also use a wavy hamza. Again, we’re uncertain if this is a distinctly different character to the Arabic hamza or is it a stylistic variation that is script dependent meaning that a standard hamza is acceptable.

We would love to hear from you on this as these are very detailed questions yet there is little information to be found. We want to make sure we can provide as comprehensive and high quality a font suite as we possibly can within the limits of our current remit.

Bruno Maag

Read more
Marcus Haslam

Something exciting next year
Bruno Maag from Dalton Maag has been asked by the Design Museum London to put on an exhibition of his work. This is a collaboration between ourselves and DM,
the exhibition will be in two parts a substantial part of which will be featuring the Ubuntu font.

Exhibition from 28th January for a month

more details to follow in the new year

Read more
Iain Farrell

It’s _almost_ there. Happy “so close to release I can almost taste the Ubuntinis” Day everyone! And if you’ve not tried an Ubuntini, well you should. The next release of Ubuntu releases on the 10th October but the release candidate is out there now and as I write this the final release meeting of the cycle is happening on Freenode in #ubuntu-meeting.

It’s been two weeks since your last update from the design team, so what have we been up to?

smiley face emoticon

Well, for one thing the smiley fella above was born and has started appearing on the design blog. More on him and his siblings from Otto in a later post ;)

Probably the biggest news is that the new Ubuntu font family have made their first appearance in our desktop release and those of you running Maverick will now also notice that the Ubuntu and Canonical websites make use of the regular font as well as this very blog.

The new type face at work in the desktop

You can also read some more thoughts on the type face in Mark’s Blog.

It’s very exciting to see this in the wild and it seems like a good time to say thanks to the people who’ve helped us get here. Thanks to Bruno, Lukas, Amelie, Malcolm and Shiraaz at Dalton Maag who’ve designed the font, Paul Sladen for managing the bugs and liaising with the community and also Ken Vandine and Dan Holbach for helping us package the files, Robbie Williamson for approving exceptions that meant we could get it in after deadlines had passed and finally Scott Kitterman for finally hitting the approval button.

We hope you like it, it’s part of your desktop so get involved over on the project launchpad page. More enhancements are coming so stay tuned for more in the coming months.

So now that our Meerkat is grown up our attention turns to a particularly Natty Narwhal that will need our love and attention before they’re released into the wild about 7 months from now. That’s what we’ll be focusing on and we’ll be sharing more of our ideas in the coming weeks as we prepare for UDS.

And finally, a video treat for you to the end the week with. Those lovely people over at OMG! Ubuntu! reminded me that the Blender Foundation have been working on a new short film called Sintel and they’ve released it online for you to enjoy.

A scene from Sintel

The particularly exciting thing about the work they’re doing is that once it’s finished they’ll share their output with the world not only as a video but also all the source files will be released under a creative commons license meaning that they can be used by others to learn from. You can find out more about the project and the Blender Foundation on their website.

Have a fantastic weekend and here’s to our launch parties in the next week or so!

Read more
Lukas Paltram

It’s all about Greek

We are familiar with the Latin alphabet; we are used to seeing it’s forms and shapes and we read it without thinking. When we design Latin fonts, we can rely on our intuition and experience to create the letter shapes; we feel when a character is right or wrong. When designing a non-Latin typeface we can draw on our experience of drawing letterforms but it is important that we research and explore the calligraphic history of the relevant script to ensure our interpretation of the script is correct. In addition we work with a design professional native to the respective script, someone who has affinity for type, understands legibility, and also is able to see the design in the context of its need to match Latin as well as maintaining cultural integrity.

Corrections

When we design non-Latin scripts we know that each has different structural and textural characteristics. The Cyrillic alphabet for example has a more static and square appearance, and because of the number of complex shapes the overall texture tends to look darker and closed. The lowercase Greek glyphs, on the other hand, contain many open and round shapes, have descenders and some are terminated with tail like features giving the script a less static appearance, as if the characters were dancing over the baseline thereby creating a lively texture.

going through different options

The principle of the Ubuntu typeface is simplicity and clarity which at the same time carries a certain recognisable distinctiveness. As in Latin, some Greek characters can be interpreted in different ways in regards to shaping and structure, all accepted and legible. Especially in modern Greek fonts we tend to see more progressive interpretations of some character forms. Whilst designing Ubuntu Greek we were keen to respect the Greek script traditions but take a contemporary and thoughtful approach.

phi

The Greek ‘phi’ is a good example of different design interpretations. Whilst the the far left version is the usual suspect, the middle variant has a calligraphic influence. With the interpretation on the far right we found a design that is just right for the Ubuntu approach – simple, crisp and perfectly balanced with the other characters.

pi

The lowercase ‘pi’ is reduced to its simplest form. In its simplicity it retains its legibility and its construction has a logic that carries across other scripts, too. Other shapes, like ‘tau’, emphasise features. Its terminal follows the movement of ‘iota’ and is closely related to the Latin ‘t’ and ‘f’, and in some way ‘l’. Together with our external consultant we examined every character, and how the interact together, eventually leading us to the final Greek Poytonic character set.

Read more
Iain Farrell

In this latest post from Dalton Maag Lukas Paltram updates us on the development thinking that went into the italics in the new Ubuntu font family.

The design of the regular weight of the Ubuntu font, in all three script systems, was a big step forward. All design principles were defined and fixed. We could now proceed to it’s close companion, Ubuntu italic.

Upright and italic characters

The first trials for the Italic were concerned primarily with the question whether this should be simply a slanted and refined version of the regular style, typical for grotesque and geometric font styles, or should it be a classic, true Italic as we know it from serif and humanist sans serif fonts. We felt that only a true italic could satisfy the design of the Ubuntu font.

In typography, the purpose of the italic is to emphasise certain words or sentences. Therefore, a textural difference to the regular is important. The italic angle is of course the most obvious difference but in addition a slight reduction of width further helps to differentiate the italic.

Italic fonts have their roots in cursive handwriting and accordingly some characters have different shapes to the upright version. This is most obvious in the characters a, e, f or g, for example. As Latin script readers we are used to seeing these alternative glyph shapes and they are perfectly legible. Yet Ubuntu is a multilingual typeface, and we also had to consider other scripts and the changes that a switch to the cursive structure would bring to them. So, how does that affect Greek and Cyrillic letters, or other characters that we are not so familiar with?
Changed shapes

The principle of the regular design is simplicity and clarity. This principle needed to be carried across to the italic design,  so we introduced just enough true italic elements to give it its own warm and human character without compromising on simplicity and clarity.

Lukas Paltram

Read more