Typography for the web and app design

This weekend I want to get some of the text in to the pages so that I can finalise layout and create/place buttons, which means it's time to look at typography that is optimal for the web.  I looked at some lists off of SpeckyBoy.com to get started, which showed me that the sans-serif rule can be broken among other things! Then I got more specific, looking at app designs and how typefaces are used there, which was a great guide to designing while considering things such as screen size constraints and side of font.

For the web

http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/

Bold and chunky with slim

Fig 1

Fig 2

Serif typefaces

Not something I thought I could get away with, but serif typefaces have worked in these examples.  They give a more personal, chatty feel to pages that the sleeker, starker fonts don't quite get. 

Fig 3

Fig 4

Here in particular the serif typeface works well with the charming illustrations, as it lends a hand-crafted feel.

Fig 5

Slim sans serif as a title font

Simone and I were recently discussing the prospect of having a title typeface and a body typeface or font, and up until seeing these I had thought I would go for a more decorative one.  However despite being very sleek, there have proven to work well with illustrations that have more life in them.

Fig 6

Fig 7

I am pleased to see this kind of typeface works well with a ribbon!

Fig 8

Cursive/decorative

Cursive typefaces are full of character, which means they would suit a page header and could feasibly work with the feel of my illustrations.  

Fig 9

Fig 10

Hand drawn look

Hand drawn type can work delightfully on the web with the right kind of illustration, as shown here.  The images below are simple and quirky, elements which the design of the typeface compliments.  The black used here is very heavy so I'm not sure if I would use such a dark tone in the title, however the same shade is necessary for the smaller text as there is a lot going on here.  I myself will likely not have to worry about that particular problem.

Fig 11

Love this - use of textures in both the background and the typefaces gives it a feel of being handwritten, which furthermore lends to a feeling of a product that is homemade and hand-crafted.  The little arrows are very sweet too.

Fig 12

The mix of hand-drawn type shown below is something I might not have tried myself as I would have thought it was too busy, but by keeping a limited colour palette, the designer has given the page a liveliness that does not result in an overload of information.  So far I have only kept to one colour palette which I think works for me, but this example shows another method that can be kept in mind.
Notice that the x-heights for the letters are all kept fairly consistent within each word which helps legibility on screen.  

Fig 13

Bebas Neue and serif fonts

Those who know me know I am a sucker for a tall, slim all-caps typeface with enough thickness to be legible.  These work great as a title font or as subheadings as can be seen in the examples below.  I may experiment with fonts like Bebas Neue for page headings and buttons, as at the moment I have either used Gill Sans, Futura or Lobster ITC which is a loopy cursive typeface. The x height is quite tall but consistent throughout which makes it a suitable choice for the web. 

Fig 14

Fig 15

Big typefaces

I would not normally consider these as I have a lot of illustration on each page, but the examples below show that it can be effective.  The punchiness of a big, big header is quite appealing and you can see the equal space between letters which makes for optimum screen reading. 

Fig 16

This example interested me as it's a mix of a large, very angular slab-serif with a much smaller, softer one.  I think the small serif text could be difficult to read for some people, especially if this were to be presented on mobile.  

Fig 17

Fig 18

App Design

Carrie Cousins' article for Design Shack details some great do's and don'ts for web typography, particularly in relation to designing for mobile devices.  A condensed version can be seen in the screen shot below.

Fig 19

A second article by Cousins showcases examples of great mobile typography and the challenges that come along with it.  Focusing mainly on readability and elements which can enhance that such as contrast (one for me to bear in mind), space on a page and how much to give with a tablet, and elements such as responsive design -which, while being less applicable to my work is still an important thing to pay attention to as it factors in size, kerning and number of characters per line.  All things I need to be thinking about when laying down the copy with the illustrations this weekend.  Examples below from the page showcasing her favourites:

Fig 20

The style of menu in the centre of the above image would make a good sidebar for my app.

Fig 22

Fig 23

Fig 24

Notice that the typography is always in white to contrast the high-colour images, and almost always sans serif with a consistent x-height throughout.

From the same page also comes these examples, which Cousins used as headers to split the page up.  These images show the tablet version and the same screen as presented on a smartphone.  It's clear why the transition has been successful - typefaces are legible in all font sizes and number of characters per line can be adjusted accordingly.  The rounded slab serif in Figure x is something I didn't consider trying before, but it makes for a strong header text that has a slight softness to it which I believe would work nicely with my current style of illustration. 

Fig 25

Fig 26

KPMG Switzerland's blog for web and mobile is laid out in columns with a clean sans serif.  To me it would be a little bit on the fine side for my own work, but because the background is white and the x-height is consistent (except capitals), it is legible enough for reading. 

Fig 27

Cousins' articles mention her favourite apps for great use of typography, a few of which I have visited and screen-shot as you'll see below. 

Evernote 

Fig 28

Fig 29

Fig 30

Fig 31

Evernote uses a mix of slab serif and angular sans serif for its headings, while the body text is mostly a neat little slab serif.  The latter is quite fine in width, but with contrasting colours to the backdrop they are made highly visible and legible.  For me, slab serifs have a bit of personality about them (serifs being very refined) which I think fits the Evernote brand and feel really well. 

Flipboard

Flipboard is a website, a little like Stumbleupon, where the user registers their interests and receives a "news feed" with articles accordingly.  Again, there is a good mix of serif in the body text and sans-serif in headings, which as seen on the welcome page are contrasted in white and highlighted with a box, which echoes the shape of the pictures and anchors the text on the page. 

Fig 32

Homepage screenshots below.  Headings are in black sans serif against a white background, while body text for the articles are a serif typeface.  The typefaces are both very simple and clean, as this is an app for information which is therefore super text-heavy.

 text

Fig 33

Fig 34

Red Stamp

Red stamp's logo is whimsical and loopy, so it was a surprise to see that the header and body fonts were a very slim, sleek sans serif which does not give off the mood I would associate with the company.  However, the vibrancy of the images and the crafty, girly look of the site are where these brand values shiny through, so a slim text is perfectly suited for both legibility and bringing the design back from being overly decorative (which might look a bit sickly sweet pared with everything else here).   Usually I would try to pair a typeface with an illustration that related to it - flat design with Gill Sans etc etc.  However, this example has shown me that sometimes it is necessary to do the opposite to avoid a total overkill!

Fig 35

Fig 36

Fig 37

References

Fig 1-9, 14, 15. From Rochelou, J. 2012. 40 Examples of Brilliant Responsive Web Layouts [online] Available at: http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/

[Accessed 06 March 2015]

Fig 11-13, 16-18.  From Khal, J. 2012.  A Showcase of Typography in Web Design [online] 

Available at: http://speckyboy.com/2012/01/25/a-showcase-of-typography-in-webdesign/

[Accessed 06 March 2015]

Fig 19.  Cousins, C. 2014.  Screen shot from Tips for Designing Better Mobile Technology [online]

Available at: http://designshack.net/articles/typography/tips-for-designing-better-mobile-typography/

[Accessed 06 March 2015]

Fig 20 - 24. From Treder, M. 2014.  Great Typography in Mobile Design [online]Available at: http://designmodo.com/typography-mobile-apps/

[Accessed 06 March 2015]

Fig 25-26.  Available at: http://tympanus.net/codrops/2012/11/12/mobile-design-typography-is-vitally-important-and-challenging/

[Accessed 06 March 2015]

Fig 27: KMPG Switzerland.  KMPG Switzerland blog [online] Available at: http://blog.kpmg.ch

[Accessed 06 March 2015]

Fig 28-31. Evernote.  2015.  Evernote home page [online] Available at: https://evernote.com

[Accessed 06 March 2015]

Fig 32- 34.  Flipboard. 2014.  Flipboard Homepage.  [online] Available at: https://flipboard.com

[Accessed 06 March 2015]

Fig 35-37.  Red Stamp. 2015. Red Stamp Homepage.  [online] Available at: https://www.redstamp.com

[Accessed 06 March 2015]