How long do you play with Fonts?

[Joss]

Or more to the point, how long to you mess with typography for a website?

Today I have been starting work on my own general portfolio site - the last one crashed and burned several years ago and has been substituted with a meagre holding page for far too long.

I decided to go a very minimalistic route, technically speaking.

First, I started with the smallest grid I could find: Simple Grid.

Then I wrote some extra media queries to cover hiding for phone only or showing phone only, or whatever. Not a very complete version, but just enough to cover my initial needs.

Next up, I played with a bit of JQuery in conjunction with Horst's rather delicious Pageimage Manipulator (though it confused the hell out of me for a bit!)

The idea has been to check the window width with jquery and depending on the size, use different versions of a background image that only covers the right hand half of the window for iPad and above, not just resized, but cropped in specific ways. 

Oh, and then a tiny bit of JQuey to pop up a minimalistic menu.

So, all well and good. 

Then I went off to the font shop to choose my font. After umming and moaning and chewing my own beard for a couple of hours I settled on the rather predictable Lato - it is rather nice though.

Now, remember that I am starting with a clean sheet here - the only typography styles are browser defaults. So, before I start on anything clever, I need to get my base font nailed down.

Easy?

Well, it would be if I was not being so bloody minimalistic and arty-farty!

I wrote a carefully crafted introduction with a h1 and h3 title and sub title, and started playing.

Here is a tip - DON'T USE LOREM IPSUM! If you are a writer, you will want your typography to match the sense of what you are writing. Blocks of Lorem Ipsum tend to be very dense and if you are not going to be laying out your story in that fashion (and in Latin), then it is misleading as hell. It is far better to put a little time aside and write something genuine that you are likely to use in the finished site.

So, I wrote my intro:

Does it Hurt?

 

The Work of Joss Sanglier

 

It is not probable that any one person can discharge all of which they dream in one lifetime.

 

For the dreamless, this is a problem without relevance, but for the dreamer this is a source of endless frustration.

 

This website chronicles but a part of my own, thoroughly frustrating creative endeavour.

 

And I stared at it. Well, I am quite pleased with the words, and they even fitted an iPhone rather nicely, but I wasn't enthused about the size, spacing or anything else.

 

So I started playing ... and tweeking .... and refreshing .... and tweeking a little more.

 

And I kept going till?

 

Well, I started about 3 hours ago and I am still going. I think I am pretty close now.

 

My typography.css sheet is looking like this at the moment:

 

html {
	font-size: 62.5%; /* 10px browser default */
}
body {
	font-size: 1.6em; /* equiv 14px */

	line-height: 1.5; /* adapt to your design */
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	background: #f5f5f5;
	color: #444;
}
h1 {
	margin: 1.0rem 0;
	font-size: 3.6rem;
	font-weight: 300;
	letter-spacing: -0.06rem;
}
h3 {
	margin: 1.0rem 0;
	font-size: 2.4rem;
	font-weight: 300;
	letter-spacing: -0.06rem;
}
p {
	margin: 0 0 2.0rem;
	padding: 0;
}

 

And that is working quite nicely. Oh, it is a bit more detailed than that ... but not a lot!

 

What I am trying to do is come up with a schema that suits all of my output. In reality that is impossible as there are some rather large differences in style and subject to address, but if I can come up with an introduction that works beautifully, from then on I should be playing with shades of variation rather than complete palette changes.

 

Which reminds me ... I haven't even begun to think of colours much yet!

 

Better put another week aside.

 

 

Joss

[Marek]

i spend a lot of time playing with fonts. for me it is one of the most important aspects of webdesign (if not the  most important). i spend hours just to find good header & body font combination.

readability is everything, and i think that too many web designers are forgetting about it (or they don't get it?) and instead they focus on how nice it looks ... i have some rules that i try to follow everytime

• one paragraph lines should not be longer than 80 characters
• font-size 18px or more (sometimes more than 20px) for screens larger than mobile. for mobiles i just set it to 100%.
• black text (at least #444) on white background, never white on black.
• bold headlines
• around 1.5 line height
• single column text

one good free source of fonts is http://brick.im/ it renders font differently that google fonts. they look better then google fonts especially on headlines. however, there is not such a difference in chrome as it use to be since last chrome update a few weeks ago changed font rendering. however, the difference in mozilla is still noticeable.

[cstevensjr]

My point of view is that Typography is very important in the Web Development process.  I'm no expert though, as I'm still learning as I go.  I believe that good typography puts a finishing touch on a website.

I use MyFonts, FontSpring and Adobe Typekit.  FontSpring is my favorite, as they have what I believe are great rules on the use of fonts.

I also do a lot of graphics work for my clients (forms, images, menus, flyers and documents) and I have gotten away from the default fonts and started to use different fonts on all my workstations.  I plan in the next year or two, to invest more of my time in learning and appreciating the world of Typography.  There's a lot to learn.

[Marek]

another good tool that can help you when choosing typography is  http://typecast.com/

it is paid tool but you can use their public demo to try and combine google fonts ...

use this link

http://typecast.com/preview/google/lato

you can use it for any google font not just Lato. just rewrite it with roboto or open+sans and so on

[OrganizedFellow]

First, I started with the smallest grid I could find: Simple Grid.

That's the smallest?

I'll bet you mine is smaller than yours?

Well, not MINE, per say, but ... I found one smaller!

https://github.com/arnaudleray/pocketgrid/blob/master/pocketgrid.css

[Joss]

But don't you have to add your own css definitions to pocketbooks?

[horst]

@Joss: I have started with my portfolio site too. (for the third time now  )

I use "rem" the first time. I have set html to 62.5% and body to 1.6rem. This should be equiv to 16px, not to 14px what you have noted in your css. Also I have read that one should / can use a fallback for browsers that do not support rem: first specify it in px and after that in rem:

html { font-size: 62.5%; }

body { font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2.0rem; }

h1   { font-size: 32px; font-size: 3.2rem; line-height: 40px; line-height: 4.0rem; }

So I'm not an expert in this, also browser support should be widely these days. I have read a good article about rem here: http://snook.ca/archives/html_and_css/font-size-with-rem

This together with box-sizing-border-box (what has got an update in August 2014!) and a small css (pocket)grid, it should be fun to build it from scratch.

I'm looking forward what you will build. The last site I have seen is really good.

[Joss]

Actually,it was equivalent to 14 till I changed it; My notes are out of date, as usual.

I am going to put fall backs - I didn't want to initially, but I thought I should.

One thing about your image module - is there a global switch to force recreating during site development? Rather than having to change each individual instance?

[horst]

One thing about your image module - is there a global switch to force recreating during site development? Rather than having to change each individual instance?

At the moment you only can add a boolean param to every pimLoad('prefix', $forcenew) call. This way you can set it at one centralized (template prepend file?) place to true or false. You can leave this in your templates, also once when deployed to production site, but then set to false, of course.

Don't know if it is a good idea to bind it to $config->debug?

$forcenew = (bool)$config->debug;

[Joss]

Oh, I never turn on debug unless I am scouting for problems - too depressing!

[DaveP]

A couple of CSS font size/calculator/designer thingies - type-scale.com and gridlover.net/app for your font scaling pleasure.

[Joss]

Hey Dave,

Love the musical references in Type Scale

[DaveP]

@Joss it seems that there are some similarities between visual and aural rhythms. (Entirely beyond my comprehension, all of it.)

[Soma]

Usually for days.

[OrganizedFellow]

Reminds me, I should renew my subscription for TypeKit before the end of the month.

[Christophe]

Hello,

What do you think about this entire article?: https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

Edit: I'll try to read all the article's comments.

[szabesz]

9 hours ago, Christophe said:

What do you think about this entire article?: https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

I 100% agree