Song Fight! Style Guide

Let us know when something isn't working correctly, or if you find a typo. Do not post complaints or suggestions here.
User avatar
Lunkhead
You're No Good
Posts: 8107
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Song Fight! Style Guide

Post by Lunkhead »

This thread could be a place where the Fightmasters lay out a style guide with information about how the logo works, the official Song Fight! colors/fonts/etc.

Here are some bits of info from Spud in another thread:
Spud wrote:[logo color]... Should be C60000
Spud wrote:If you study the original logo, you will see that the aspect ratio on the word "SONG" is different than the aspect ratio on the word "FIGHT!", in order to fit one over the other. This is part of what gives the logo its character (no pun intended).
Care to enlighten us about the font settings for "SONG" and "FIGHT!" when placed one on top of the other?
Spud wrote:When you string the[m] out into one long line (which I do NOT prefer for this reason, among others) ... No solid rules here. Just make it look good.
Spud wrote:On the other hand, I am not saying that every time the words SONG FIGHT! appear in cover art, they should be in IMPACT at C60000. Use your judgement. Often, that would just not work with the art, and that's fine.
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Song Fight! Style Guide

Post by Spud »

See BLT, this is why I usually keep quiet. Now I have more work to do.
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
Manhattan Glutton
Ice Cream Man
Posts: 1530
Joined: Tue Feb 15, 2005 12:10 pm
Instruments: Angst
Recording Method: REAPER
Location: Madison, WI
Contact:

Re: Song Fight! Style Guide

Post by Manhattan Glutton »

Lunkhead wrote:Care to enlighten us about the font settings for "SONG" and "FIGHT!" when placed one on top of the other?
I did it for the SFBase logo, but I forgotted. I think you just use Impact font and stretch. Pretty easy to figure out if you have a layered image program. Inkscape (free vector graphics program) works great for this if you have to do even more font finagling. But I'm pretty sure I just used Paint.net.
If I had a dollar for every one of my songs j$ has called a 90s pastiche, I'd have $1 for every song I've written.

Nur Ein Archives | The New Ugly Podcast
User avatar
Lunkhead
You're No Good
Posts: 8107
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Song Fight! Style Guide

Post by Lunkhead »

Personally I think it would be much more user friendly if the logo, at least on the Web, were done just using text and CSS. Then anybody could just "Inspect Element" in their favorite browser and instantly see how it's set up. No guesswork required. And if someone needs to make an image out of it, they can just reuse the font settings from the CSS in their image editor.
User avatar
Manhattan Glutton
Ice Cream Man
Posts: 1530
Joined: Tue Feb 15, 2005 12:10 pm
Instruments: Angst
Recording Method: REAPER
Location: Madison, WI
Contact:

Re: Song Fight! Style Guide

Post by Manhattan Glutton »

You're such a programmer. :)
If I had a dollar for every one of my songs j$ has called a 90s pastiche, I'd have $1 for every song I've written.

Nur Ein Archives | The New Ugly Podcast
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Song Fight! Style Guide

Post by Spud »

Lunkhead wrote:Personally I think it would be much more user friendly if the logo, at least on the Web, were done just using text and CSS. Then anybody could just "Inspect Element" in their favorite browser and instantly see how it's set up. No guesswork required. And if someone needs to make an image out of it, they can just reuse the font settings from the CSS in their image editor.
Show me such an implementation. Does every target device have Impact, or does everyone who supports the logo have to deliver it on the fly?
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
fluffy
Eruption
Posts: 11029
Joined: Sat Sep 25, 2004 10:56 am
Instruments: sometimes
Recording Method: Logic Pro X
Submitting as: Sockpuppet
Pronouns: she/they
Location: Seattle-ish
Contact:

Re: Song Fight! Style Guide

Post by fluffy »

Also CSS doesn't provide a device-independent way to size text in the way that's necessary to reproduce the logo correctly.

Isn't the best way to reproduce it just, you know, save the image?
User avatar
Lunkhead
You're No Good
Posts: 8107
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Song Fight! Style Guide

Post by Lunkhead »

http://lmgtfy.com/?q=web+safe+fonts+impact

I could try to reproduce what you're doing in your image editor if you or anybody else would ever actually get around to putting some specific details about exactly what font settings you're using on here.
User avatar
Billy's Little Trip
Odie
Posts: 12090
Joined: Mon Nov 13, 2006 2:56 pm
Instruments: Guitar, Bass, Vocals, Drums, Skin Flute
Recording Method: analog to digital via Presonus FireBox, Cubase and a porn machine
Submitting as: Billy's Little Trip, Billy and the Psychotics
Location: Cali fucking ornia

Re: Song Fight! Style Guide

Post by Billy's Little Trip »

Spud wrote:See BLT, this is why I usually keep quiet. Now I have more work to do.
What makes you think I'd even be reading this lame ass thread? I have WAY more important things to do! porn
User avatar
fluffy
Eruption
Posts: 11029
Joined: Sat Sep 25, 2004 10:56 am
Instruments: sometimes
Recording Method: Logic Pro X
Submitting as: Sockpuppet
Pronouns: she/they
Location: Seattle-ish
Contact:

Re: Song Fight! Style Guide

Post by fluffy »

Lunkhead wrote:http://lmgtfy.com/?q=web+safe+fonts+impact

I could try to reproduce what you're doing in your image editor if you or anybody else would ever actually get around to putting some specific details about exactly what font settings you're using on here.
I'm pretty sure that the way you reproduce the SF logo is to have two lines of text, one reading

SONG

and one reading

FIGHT

and then you scale the line that says SONG to make its width match the line that says FIGHT.

And CSS still doesn't provide any way of safely and device-independently scaling text horizontally to match their horizontal-extents. (In fact the only thing I see is the CSS3 font-stretch selector which is both an optional component and leaves it up to the font rendering engine to make an appropriate font selection before it tries to do an actual stretch, which is probably not what you want. And it doesn't allow for numeric stretching anyway.)

Spud didn't need to make a recipe for creating the text because it's something he did visually, once, for the site. That image itself IS the template for how to make it yourself if you need it at a higher resolution for some reason.

(Also I take a very slight issue with Spud's use of RGB hex codes for the text color because that assumes things about the color space and so on, and doesn't map to offset printing where you'd want to use Pantone colors or something. But assuming sRGB is good enough.)
User avatar
Billy's Little Trip
Odie
Posts: 12090
Joined: Mon Nov 13, 2006 2:56 pm
Instruments: Guitar, Bass, Vocals, Drums, Skin Flute
Recording Method: analog to digital via Presonus FireBox, Cubase and a porn machine
Submitting as: Billy's Little Trip, Billy and the Psychotics
Location: Cali fucking ornia

Re: Song Fight! Style Guide

Post by Billy's Little Trip »

fluffy wrote:
Lunkhead wrote:http://lmgtfy.com/?q=web+safe+fonts+impact

I could try to reproduce what you're doing in your image editor if you or anybody else would ever actually get around to putting some specific details about exactly what font settings you're using on here.
I'm pretty sure that the way you reproduce the SF logo is to have two lines of text, one reading

SONG

and one reading

FIGHT

and then you scale the line that says SONG to make its width match the line that says FIGHT.

And CSS still doesn't provide any way of safely and device-independently scaling text horizontally to match their horizontal-extents. (In fact the only thing I see is the CSS3 font-stretch selector which is both an optional component and leaves it up to the font rendering engine to make an appropriate font selection before it tries to do an actual stretch, which is probably not what you want. And it doesn't allow for numeric stretching anyway.)

Spud didn't need to make a recipe for creating the text because it's something he did visually, once, for the site. That image itself IS the template for how to make it yourself if you need it at a higher resolution for some reason.

(Also I take a very slight issue with Spud's use of RGB hex codes for the text color because that assumes things about the color space and so on, and doesn't map to offset printing where you'd want to use Pantone colors or something. But assuming sRGB is good enough.)
What about !? That changes everything! :P
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Song Fight! Style Guide

Post by Spud »

Actually fluffy, I think it is the other way around. You squash the FIGHT! to fit under the SONG, but don't worry, I am documenting it.
The only reason that I don't create a full-fledged style guide is that JB wouldn't follow it. I mean really. The SFBB The Song Fight Network? What's that???

p.s., regarding colorspace, I was talking about the web there, and operating on a "close enough" level of tolerance. There was a clear difference between what BLT posted and the color of the logo on the site. There have never been any print standards, since this whole operation started out in web space, but I could make some up if anyone is planning on printing something.
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
jb
Hot for Teacher
Posts: 4159
Joined: Sat Sep 25, 2004 10:12 am
Instruments: Guitar, Cello, Keys, Uke, Vox, Perc
Recording Method: Logic X
Submitting as: The John Benjamin Band
Pronouns: he/him
Location: WASHINGTON, DC
Contact:

Re: Song Fight! Style Guide

Post by jb »

Yeah! I go my own crappy half-assed way!

(I contend it's better than that phpbb logo that was there.Harrumph.)
blippity blop ya don’t stop heyyyyyyyyy
User avatar
jast
Ice Cream Man
Posts: 1325
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: Cubase, Steinberg UR44
Submitting as: Jan Krueger
Pronouns: .
Location: near Aachen, Germany
Contact:

Re: Song Fight! Style Guide

Post by jast »

Here's an alternative logo for the forum, just for the heck of it. I had to cheat to make it fit, though.
forum-logo.png
forum-logo.png (2.38 KiB) Viewed 2355 times
User avatar
Lunkhead
You're No Good
Posts: 8107
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Song Fight! Style Guide

Post by Lunkhead »

You guys are so funny sometimes. If there is in fact "horizontal scaling" involved, and not just changing some font setting (like letter spacing) until things look right, that would be a problem. I guess I assumed the "scaling" was done with a font setting and that therefore it might be possible to reproduce the font setting using CSS font settings. That's unfortunate.

Anyway, for fun here are some links to examples of other company's branding/logo guidelines:

http://support.twitter.com/entries/77641
https://www.facebook.com/brandpermissions/
http://www.dropbox.com/developers/reference/branding
http://www.android.com/branding.html
http://www.apple.com/legal/trademark/gu ... rties.html
User avatar
fluffy
Eruption
Posts: 11029
Joined: Sat Sep 25, 2004 10:56 am
Instruments: sometimes
Recording Method: Logic Pro X
Submitting as: Sockpuppet
Pronouns: she/they
Location: Seattle-ish
Contact:

Re: Song Fight! Style Guide

Post by fluffy »

Lunkhead wrote:You guys are so funny sometimes. If there is in fact "horizontal scaling" involved, and not just changing some font setting (like letter spacing) until things look right
That is what everyone was saying, yes.
User avatar
Manhattan Glutton
Ice Cream Man
Posts: 1530
Joined: Tue Feb 15, 2005 12:10 pm
Instruments: Angst
Recording Method: REAPER
Location: Madison, WI
Contact:

Re: Song Fight! Style Guide

Post by Manhattan Glutton »

For you, Sam.
http://xtravar.org/sf/songfight.svg

*this post and linked logo have not been approved by anyone
User avatar
Billy's Little Trip
Odie
Posts: 12090
Joined: Mon Nov 13, 2006 2:56 pm
Instruments: Guitar, Bass, Vocals, Drums, Skin Flute
Recording Method: analog to digital via Presonus FireBox, Cubase and a porn machine
Submitting as: Billy's Little Trip, Billy and the Psychotics
Location: Cali fucking ornia

Re: Song Fight! Style Guide

Post by Billy's Little Trip »

:P........
Attachments
song dong.jpg
song dong.jpg (27.19 KiB) Viewed 2340 times
User avatar
Manhattan Glutton
Ice Cream Man
Posts: 1530
Joined: Tue Feb 15, 2005 12:10 pm
Instruments: Angst
Recording Method: REAPER
Location: Madison, WI
Contact:

Re: Song Fight! Style Guide

Post by Manhattan Glutton »

It's not Song Penis. It's Dong Fight.
If I had a dollar for every one of my songs j$ has called a 90s pastiche, I'd have $1 for every song I've written.

Nur Ein Archives | The New Ugly Podcast
User avatar
Billy's Little Trip
Odie
Posts: 12090
Joined: Mon Nov 13, 2006 2:56 pm
Instruments: Guitar, Bass, Vocals, Drums, Skin Flute
Recording Method: analog to digital via Presonus FireBox, Cubase and a porn machine
Submitting as: Billy's Little Trip, Billy and the Psychotics
Location: Cali fucking ornia

Re: Song Fight! Style Guide

Post by Billy's Little Trip »

Manhattan Glutton wrote:It's not Song Penis. It's Dong Fight.
NO! That doesn't roll off the tongue good. snickers

.....plus it makes me picture something painful like this! Image
User avatar
Spud
Hot for Teacher
Posts: 4770
Joined: Fri Sep 24, 2004 10:25 am
Instruments: Bass, Keyboards, eHorn
Submitting as: Octothorpe
Location: Seattle
Contact:

Re: Song Fight! Style Guide

Post by Spud »

I know what a fucking style guide looks like.
"I only listen to good music. And Octothorpe." - Marcus Kellis
Song Fight! The Rockening
User avatar
Lunkhead
You're No Good
Posts: 8107
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Song Fight! Style Guide

Post by Lunkhead »

fluffy wrote:
Lunkhead wrote:You guys are so funny sometimes. If there is in fact "horizontal scaling" involved, and not just changing some font setting (like letter spacing) until things look right
That is what everyone was saying, yes.
That is what you were saying fluffy, not everyone. The words Spud used that I quoted in the original post in this thread were about "the aspect ratio" which to me isn't 100% clear as to whether that means horizontal scaling of rasterized text or some font property that controls scaling or letter spacing. Spud is the primary source of definitive information on that, as far as I understand things, so what I think is really important is his description of how it works.
Spud wrote:I know what a fucking style guide looks like.
I don't think anybody said you didn't...? Are you responding to me putting links to other company's style guides in the thread? I found reading those pages informative, personally. Sorry if including them was insulting to you for some reason. My posting them really had nothing to do with you personally. I was trying to provide some helpful context for people who might read this thread. Sorry...?
Post Reply