DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Fonts & Typography

Reply
 
Thread Tools Display Modes
Old 06-08-2012, 02:13 AM   #1
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default Fonts for the web (2) - web fonts!

OK - so I didn't like 'web fonts' in their first incarnation, but that was when I still used a modem to get on the web, and downloading a font took way too much time. Of course even then some browsers at least allowed you to disallow that — with the result that some websites broke completely because they had not thought to supply an alternative.

That attempt at webfonts soon petered out - the internet (as a network) simply wasn't ready for it, choices were few, it all too too long...

Now they're back, and to be honest I still don't like them. They still add to the weight of a page (even though fonts can be 'compiled' to include only the characters you actually use), precisely those pages that often are already heavy. And, again, some browsers allow you to turn that off, including my daily tool Firefox -- and I do.

On the other hand, I recognize many people do like them, and they can be good for branding, especially when you can use the same distinctive font both on a website and in printed matter.

So... amazingly, I am actually looking for one or more nice fonts I can use both for things like business cards and for headlines on one or more of my photo websites (this partly depends on to what extent hosted photo sites can be customized!).

While working on my new SmugMug site (no, no URL yet, it's broken more often than not!) I've decided I want to use rounded boxes for anything that's smaller than a screen (i.e. excepting full-screen photos or slideshows). With the result that I've been looking for a nice desktop+web font that matches that...

Some keywords (terms that will pop up as categories or gallery names):
  • cultural surfaces (site name)
  • walls of istanbul
  • walls of south india
  • beautiful brick
  • covered
  • fences
It would also be nice if the font could easily be used to make a small logotype icon of 'CS' and 'MK' (or in lowercase). And it needs to be affordable!!

Trawled through the myFonts site with keyword 'rounded'; looking for fonts approaching 'rounded boxes'. A hint of architectural/technical drawing lettering would be nice but is not required. Different weights would be nice, not necessarily different widths. Since it's for headlines only, all caps or all lowercase is OK.

Top of my list (no order in these):
I have listed some more, but I'll leave it at this for now. Comments?

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by iamback; 06-17-2012 at 11:17 AM.
iamback is offline   Reply With Quote
Old 06-14-2012, 12:58 PM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default *bump*

I really would like some feedback on those fonts I listed, or possible alternatives.

Anyone?

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-14-2012, 02:09 PM   #3
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,187
Default

Of the four you listed, I like Rotundus Rounded best. Pricey, as you said (but I see there is a discount through the middle of July). But the letter forms are nicer (some of the others seem sprawly or otherwise awkward). Rotundus is somewhat stylish and readable, offering a good range of possibilities.

I would suggest bold and black for the screen (but you probably would want regular for print — though perhaps I am too cautious or conservative, and you could use any of these for both print and web).

Geometry Soft Pro seems kind of 1970s-ish, and the variations are limited by the angles. Some of the characters (in the variations, at least, seem hard to read, especially if not used in familiar (and probably short) words.

ArchiType is awkwardly spaced and hard to read. (I am not the right person to ask about this one as the longer I look at it, the more irritated I get.)

Paragraph has awkward character widths and the out-thrust arms of the r, c, etc. makes it hard to read. The lack of caps limits its utility as well. IMHO, of course.

I like Magistral (it has a useful range of styles including some condensed) and is readable for me. Not too rich either ($30 per weight/style).

Although I have been ignoring web fonts up to now looking at your message has piqued my interest. But I have to get my taxes finished first.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-17-2012, 08:52 AM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Great feedback, Kathleen! This is really helpful, thank you.

Quote:
Originally Posted by ktinkel View Post
I would suggest bold and black for the screen (but you probably would want regular for print — though perhaps I am too cautious or conservative, and you could use any of these for both print and web).
I'm not sure I need all bold and black for the screen - I tend to think light+regular+bold would be nice and give me room to play, for both print and screen.

One aspect I'd forgotten to mention is that I would really like a wide range of glyphs, with not just diacritics but at least also East-European languages and Turkish. That's because place names are relevant for what I do, and I like to spell them in the local language if possible. Cyrillic would be a bonus.

Quote:
Originally Posted by ktinkel View Post
ArchiType is awkwardly spaced and hard to read. (I am not the right person to ask about this one as the longer I look at it, the more irritated I get.)
I agree with that - I basically included it in the list as a hint for how an 'architectural drawings' font might work for me, but it's too angular in the diagonals anyway. That said, there is also ArchiType Rounded which I find much nicer and legible, but on the overview tab seems to have only the regular weight for the web, so I dismissed it. looking again, at the Buying options, it turns out both weights are for the web too. But still just two weights/variants is rather limited. Pro is that it does have a decent range of glyphs, including Turkish (but not Cyrillic).

Quote:
Originally Posted by ktinkel View Post
Paragraph has awkward character widths and the out-thrust arms of the r, c, etc. makes it hard to read. The lack of caps limits its utility as well. IMHO, of course.
Agreed - though I think the 'square boxes' aspect is quite deliberate and does match my 'rounded boxes idea' but a half-width box for the 'r' would be much better, I think. Where it falls flat is the range of glyphs - so it's out. Even ArchiType Rounded would be better for me!

Quote:
Originally Posted by ktinkel View Post
Geometry Soft Pro seems kind of 1970s-ish, and the variations are limited by the angles. Some of the characters (in the variations, at least, seem hard to read, especially if not used in familiar (and probably short) words.
I agree some of the variants are a bit gimmicky, but I only really like A and Y - more readable than the others and the free N might have its uses. If I pick only those it would amount to only $90 for both print and web. Wide range of glyphs, too (only not Cyrillic).

Quote:
Originally Posted by ktinkel View Post
Of the four you listed, I like Rotundus Rounded best. Pricey, as you said (but I see there is a discount through the middle of July). But the letter forms are nicer (some of the others seem sprawly or otherwise awkward). Rotundus is somewhat stylish and readable, offering a good range of possibilities.
I really like this one - plus the fact it comes in four weights. What puzzles me here is that the italic variants are much cheaper than the normal ones - why?? (I've seen that in a few other fonts as well.) I don't want italics anyway (not for headings at least), so I am slightly irritated that would only leave the pricier ones. Like Geometry Pro it has a wide range of glyphs which is a definite plus. Four normal weights would amount to $180 for both print and web - twice what I'd pay for Geometry Pro (in 2+1 variants, but only three weights). Hmm.

Quote:
Originally Posted by ktinkel View Post
I like Magistral (it has a useful range of styles including some condensed) and is readable for me. Not too rich either ($30 per weight/style).
Ouch. That's very nice - I missed that one! Very consistent style, all 'ends' are straight, all corners rounded - which makes even the diagonals (v, w, ...) fit in. And I love that it has Cyrillic glyphs, too. And condensed, too. But how to choose? 5 weights per variant... times two (excluding all italics again), would be already $300 (where the whole set is $312). Three normal and three condensed (but which?) would be $180, adding the web license it would come to $270. Yes, ouch, but still very attractive - especially with coverage of Cyrillic as well!

In terms of glyphs, Magistral and Rotundus Rounded are top of my list now, followed by Geometry Pro.

I had a few others I rather liked, too - I'll have to go through those again as well looking at glyph coverage. (Talk about time sinks!!)

Quote:
Originally Posted by ktinkel View Post
Although I have been ignoring web fonts up to now looking at your message has piqued my interest. But I have to get my taxes finished first.
Please do not mention 'taxes'...

I had been ignoring web fonts, too - until recently. RedBubble used one on a member's photo edit page (silly), and failed to provide a reasonable backup for those who do not (want to) see web fonts (like me) and I complained bitterly about the idiotically large font used as a 'page heading'. Someone(s) seems to read user journals though, and they corrected it. Still that was the trigger for me to have a look again, and I found examples of web sites where it was implemented well (and others where it was implemented badly...). One must make sure the design still works with backup fonts - and not everyone does that!

I found MyFonts has a whole separate section on their site dedicated to webfonts, with lots of useful information and examples. Most (all?) of the pages in that section have a font chooser thingy at the top - four combinations of a heading font and a body font. This is a good page to play with that - and I must say I'm rather taken with Museo Slab as a body font (2nd choice). I'd been using Verdana at the top of my font stack for that so far but I think Museo Slab (500) would be a nice replacement for that - the 'slabs' nicely lead the eye along lines of text even if they're a bit longish. Then again, if I go for a web font for body text as well, I would need an italic variant as well (a must for scientific names of plants and other critters that may cross in front of my camera). They use MuseoSlab-500Italic for that (top of the sidebar).

Do have a look at that section of their site! Very informative.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by iamback; 06-22-2012 at 07:34 PM. Reason: confusing ypot
iamback is offline   Reply With Quote
Old 06-17-2012, 11:03 AM   #5
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Now that the design is coming along a bit (still lots to do though!) I made two screenshots to give a bit of context.

They show the 'rounded boxes' on browsing pages. Still old content (it won't all stay) but it's good enough for testing. Basically a 'dark' theme (which I think highlights photos better), several shades of grey, and one accent color - not quite there, I want a red brick color. The background is a tiling image I made of a wall detail, 10% transparent over a grey background.

However nice Georgia is as a heading font (sometimes even body font), I feel I've used it too often, and doesn't really go with my subject matter either... basically everything in not-quite-brick red would be done in whatever webfont I end up selecting - and body text quite possibly in Museo Slab 500 (normal and italic where needed): that would be mostly the white text.
Attached Thumbnails
Click image for larger version

Name:	hsnap07478.jpg
Views:	40
Size:	196.8 KB
ID:	1759   Click image for larger version

Name:	hsnap07477.jpg
Views:	36
Size:	194.3 KB
ID:	1760  

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-18-2012, 12:44 AM   #6
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

Looks very nice especially the rounded elements - but the contrast is getting to the point of having to stare, in order to read clearly, for my eyes* - meaning the red on grey (* full of floaters!)
LoisWakeman is offline   Reply With Quote
Old 06-18-2012, 04:01 AM   #7
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Thanks, Lois!

Yes, like the whole of the design, the color isn't quite there yet, I know. I'm experimenting with text-shadow to make it stand out more (which won't work on IE7 but I'm doing only limited things to make it acceptable there (and NO rounded corners...). But it does show enough of the direction I'm moving in. The 'Galleries' view will get larger thumbnails (if I can get that working) and in the single gallery view the thumbnails will get rounded borders (changing on hover) and I'll probably get rid of the too-short truncated captions below - maybe a nice tooltip thingy that can handle more text.

My eyes have been full of floaters since I was a kid, and my retinas aren't quite what they should be either - both things glasses can't remedy.

I've just been experimenting with the Fontdropper tool (yet another bookmarklet) by WebINK - not that I want to use the service but it's a nice way to do a mock-up on a live site! So I applied Museo Slab (what I want for most 'body' text) and Handel Gothic D (in the same class of 'rounded boxes' style as the fonts we've been discussing, I didn't see any on my shortlist). The latter doesn't work for the headings within the boxes (either too bold or too small, or both), but for the other headings it looks good after tweaking the size a bit. That lost my shadow, unfortunately.

It does give a good idea how that type of font works together with Museo Slab for body text - it will need a little tweaking, but on the whole it is what I have in mind, and definitely distinctive from the old 'Georgia+Verdana' look.

Screenshot of my mockup attached.
Attached Thumbnails
Click image for larger version

Name:	hsnap07483.png
Views:	37
Size:	172.9 KB
ID:	1761  

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-22-2012, 06:52 AM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default Yay! First web fonts success!

Today I decided to go ahead and get Museo Slab 500 plus its italic sister (both free) from MyFonts, both because I liked the look of it as a body font, and because I wanted to try the process of getting, configuring and installing a web font.

It mostly went without a hitch - creating the 'kit' (you can always do it over again...) and following MyFont's clear instructions, plus a few tweaks to my stylesheet, and YAY!! it worked already. At least for the normal style - and in Firefox, Opera and Chrome.

The italic style was a bit more involved: I had not specified anything in my css for that at first - yet in a section marked up with the <em> tag it came out as sort-of italic: obviously the browser slanting the font (and demonstrating that that would need its own hinting to be legible!) But I never refer to any font in my stylesheets without at least providing a fallback. The problem is that the italic font - being already italic - requires a font-style: normal; in the stylesheet. That of course will not work for an italic fallback, which must be font-style: italic; instead! I came up with the following solution (which I have yet to test!):

PHP Code:
/* Museo Slab 500, with a normal sans-serif font stack as fallback */
bodytable
{
    
font-familyMuseoSlab-500,Verdana,"DejaVu Sans","Bitstream Vera Sans","Lucida Grande",sans-serif !important;
    
font-weightnormal;
    
font-stylenormal;
}
/* fallback for Museo Slab 500 Italic: normal sans-serif in style italic(!) */
em, .updated {
    
font-familyVerdana,"DejaVu Sans","Bitstream Vera Sans","Lucida Grande",sans-serif !important;    
    
font-weightnormal;
    
font-styleitalic;        /* !! for fallback */
}
/* Museo Slab 500 Italic, in style normal(!); this should load if webfonts are available & supported */
em, .updated {
    
font-familyMuseoSlab-500Italic !important;
    
font-weightnormal;
    
font-stylenormal !important;        /* !! for webfont - important is necessary to override SM style for p.updated - otherwise you'd get a SLANTED italic font!! */

There was another hiccup; while it all worked splendidly in Firefox, Opera and Chrome, it did not work at all in Internet Explorer (version 7 on my Vista box). Browsing around did not help... finally it dawned on me that the provided .css file (generated by MyFonts for the the web kit) referred to the .eot files for IE by different names than were actually included in the 'webfonts' directory of the kit. Sure enough, when I replaced the reference with the real file names, it worked in IE, too - equally spendidly!

I've shot an email with a few questions and a 'bug report' about this to MyFonts already.

Some screenshots attached - the first two in Firefox (the second with font enlarged in the browser!), the last in IE.

You can see that all body text (including top menu, breadcrumbs and footer bar) is now in Museo Slab; the IE shot also shows the italic form. Titles on the 'boxes' are also in Museo Slab, but bold - but I only have the 500 weight! Actually the browser does a pretty nice job 'boldening' it (better than the slanting for the italic!). I'll probably get a bolder weight of Museo Slab for that, but for now it will do nicely.

(BTW, I still have to write some of the code to make the thumbnails in the boxes larger - one of the first things to tackle after dealing with the top menu today, where I have to do a few more tweaks as well to get rid of at least one of the buttons SmugMug produces....)

Anyway,
Attached Thumbnails
Click image for larger version

Name:	hsnap07493.jpg
Views:	38
Size:	190.8 KB
ID:	1762   Click image for larger version

Name:	hsnap07494.png
Views:	36
Size:	65.7 KB
ID:	1763   Click image for larger version

Name:	hsnap07495.jpg
Views:	30
Size:	195.0 KB
ID:	1764  

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-22-2012, 07:53 AM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Incidentally, I've always been a fan of the Museo family, ever since Museo (the first in the family) was first launched on MyFonts back in 2008. Looking through the MyFonts site for 'Museo' I happened on a 'Creative Characters' newsletter from September 2009, with an interview with its maker Jos Buivenga. Well worth reading (if you haven't already)!

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-22-2012, 03:20 PM   #10
terrie
Sysop
 
Join Date: Oct 2004
Posts: 10,478
Default

Quote:
marjolein: Museo Slab 500
That reads quite nicely and looks good which surprised me because I didn't care for the look of the font when I checked out the link in your reply in RJ Emery's thread. Guess it goes to show that one needs to try the font out with a bit of text before make a decision about it...'-}}

Terrie
terrie is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Fonts for the web (1) iamback Fonts & Typography 1 06-08-2012 11:42 AM
Looking at Old Fonts George Fonts & Typography 4 11-18-2007 06:27 AM
Looking at Fonts dthomsen8 Fonts & Typography 7 05-24-2007 09:17 PM
Move fonts from fonts folder? Proudmoms Fonts & Typography 3 09-11-2006 06:58 AM
P22 fonts and PS/AI CS? Molly/CA Fonts & Typography 5 04-12-2005 07:31 PM


All times are GMT -8. The time now is 08:22 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Contents copyright 2004–2019 Desktop Publishing Forum and its members.