The New Blogger Interface

I tried the new Blogger interface.
Wow.
It's a LOT different.
I'm still trying to find things.

I don't like it.
It hogs too much horizontal screen real estate.
It's a poor design for wide screen displays.
The top portion of the screen locks when the page is scrolled down.
The text is tiny so I have to zoom in and that makes the screen real estate problem even worse.

Hard to read.
Features are hidden and you have to go hunting for them by clicking on things.
Tons of needless white space that could be used to display all the hidden items.
Yuk.

Playing With Fonts

Changed my template, and oh my, can one play a long time with those fonts. That was fun.
I sure like that Josefin Slab font for Post Title.
I like Syncopate font for Blog title.

I tried adding my own background image this time.
I'm using a spirograph pattern I created in Inkscape.

Not sure of that green color, but just testing.

Picasa only allows 1600x size images as far as I know. I used my wallpaper size 1366x768 and it is not seamless so not sure what I think about that. Maybe I should try an 1800x size image and load it within Blogger Template Designer, then check my html code to see what size it is?

When I changed my template, I had to add the fonts again to my template code. The fonts I used inline,that is. Tangerine and Dancing Script.

Tangerine Font Test

Two variants. Use font weight bold. Regular is too light. I could specify cursive then serif substitutes for this one? Test that. No, ugly, use serif.

Tangerine Google Font

Uppercase 60px Tangerine font weight bold:
ABCDEFGHIJKLM -Check line spacing- NOPQRSTUVWXYZ

Lowercase 60px Tangerine Bold, Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing for
bdfjklpq. This is a teensy font. Crowded letters too. Pretty though.

Letter spacing 0.05em, Line Height 1em:
Letter spacing. What does that do for this font? bdfjklpq

Misc 60px font weight bold:
&"{}?1234567890 Weird #'s.

Title 120 px:
Brief Insights

  To do is to be.
      To be is to do.
        Do be do be do be do...

Dancing Script Font Test

Dancing Script Google Font

Uppercase 30px Bold Line Height 1em:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Check line spacing.
ABCDEFGHIJKLMNOPQRSTUVWXYZ


Lowercase 30px Bold Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing.
abcdefghijklmnopqrstuvwxyz

Misc 30px Bold:
& " { }? ~ * 1234567890

Title 90 px:
Brief Insights

NOTE for Title: Italic doesn't work, em is ugly, Bold is ugly.

Google Fonts

I'm trying out the Google fonts.

“To perceive freshly, with fresh senses is to be inspired.”—Henry David Thoreau

There's so much inline code in that, it hardly seems worth the trouble.
I had to do a span for each smart quote and a span for the quote and a span for the author.
That's 4 spans each formatted with font size, color, then use Dancing Script for the font.

And THEN Blogger changes the code when I post it in my Sidebar!
So if I go in and Edit yet again, the code is wrong, and it won't display correctly.
Grrr...

Dancing Script isn't listed within the Template Designer?

It's a Google font, so I added the code per instructions here.
Add a slash at the end of the code, which isn't included in the code given at Google fonts.

I'm going to turn off fonts with Firefox NoScript and see what it looks like if the google fonts won't display for some reason. (Okay, substituted serif Georgia.)

Let's see if I can display the code:

Insert this code:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'/>
Right before:
</head>

Inline code:
<span style="color:#ffcc00;font-size:28px;">&#8220; </span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">To perceive freshly, with fresh senses is to be inspired.</span>
<span style="color:#ffcc00;font-size:28px;">&#8221;</span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">—Henry David Thoreau</span>

I added line breaks to make it easier to read. Tweaked the code too. Blogger creates rgb verbosity instead of the color#. It also strips out my smart quote codes. I think I had the emdash code (—) there too at one time and Blogger striped that out also.

If I find a better way to inline code a quote with Google Fonts, I'll post it here.