Sometimes customers would like us to “emulate and extend” some of the designs they find online, and this is commonly true about text layouts and fonts. Firebug makes grabbing the computed styles pretty easy. Just select HTML » Computed » Text, and copy and paste the rules as you see them.
But when you paste the text, you’ll see the rules aren’t formatted correctly. For example, if I go to the LinkedIn Today page, select the LinkedIn Today text, copy the styles, and then paste them, I get this:
font-family "Century Gothic",Arial,sans-serif font-size 34px font-weight 400 font-style normal font-size-adjust none color #333333 text-transform uppercase text-decoration none letter-spacing normal word-spacing 0 line-height 23.8px text-align start vertical-align baseline direction ltr text-overflow clip
That sucks. While there are plenty of ways to skin this cat, I leverage a personal bookmark at text.ecomware.com. Format Firebug CSS makes this repetitive task a snap. Just paste your styles in the top box, click Text It, and then copy the formatted styles to use in your CSS sheet. (If you’re good with regular expressions, you can create all kinds of cool bookmarks. Check out some examples.)
After using the bookmark, I end up with properly formatted style rules like this:
font-family: "Century Gothic",Arial,sans-serif; font-size: 34px; font-weight: 400; font-style: normal; font-size-adjust: none; color: #333333; text-transform: uppercase; text-decoration: none; letter-spacing: normal; word-spacing: 0; line-height: 23.8px; text-align: start; vertical-align: baseline; direction: ltr; text-overflow: clip;
And text that looks like this:
LinkedIn Today


