new fonts - Programming Blog

Posts Tagged ‘new fonts’

11 Mar 2010

cool art logo There are numerous reasons you might want to design a custom image featuring your name or that of your website, product or service. Maybe you’re doing a re-design of your website or just want a new image for Facebook.

The ‘professional’ option would be to get to grips with Photoshop and spend your time setting up the various variables to get your logo or name looking just right. Not to mention having to download new fonts and effects to create the image.

Well CoolText, a free online graphics generator, allows you to create thousands upon thousands of different text images, logos and even buttons to form your own cool name designs.

Their main service, and the one most relevant to this article, is the Text/Logo service which enables you to choose from hundreds of logo styles and subsequently thousands of different fonts.

The first step in creating cool name designs or logos is selecting what style you want. Note that the colours, fonts and sizes can be altered later. This is merely selecting roughly how the finished image will look and what animations, if any, it will have. Below you can see some of the choices you will have on the site.

cool name designs

For the purpose of this demonstration, I decided to go with ‘Glossy’. Once you select what style you want, you’re brought to the ‘Design Your Logo’ page. It asks you for basic things such as what exact text you want in your logo, text size and of course, the font.

CoolText has an excellent motley crew of fonts ranging from you basic word processor fonts to the artistic.

cool name designs

Some are even customised to resemble the fonts used in iconic logos such as NASA and Chicken Scratch. Once you select your font, you can continue to alter the text gradient. This is the colours used in certain areas of the logo. You can change the different gradients by clicking on different areas of the colour gradient bar, an example of which you can see below.

cool name designs

After this, you can select the shadow’s offset (if there is one in that particular logo style) and can select the background colour or image.

cool art logo

The final step is to select what file format to save it as. If you’re going to use it as a logo or image on a social networking site then I suggest PNG. However, if you want to integrate the image into Photoshop or indeed just edit it further in Photoshop, then save it as PSD with layers.

cool art logo

A final cool feature about this web app is that you can download all of CoolText’s fonts and logo styles to use in Photoshop by clicking ‘Fonts’ along the top menu bar. This is great if you’re an experienced Photoshop user but need some extra fonts for free. There are over 1,200 available so take your pick!

Also, take note that CoolText will only host your image for short period of time so you will have to either upload it to your own web server or a free image hosting service in order to keep it online.

So what cool name designs and logos did you create?

Did you like the post? Please do share your thoughts in the comments section!

Go to Source

No Comments
Tags: chicken scratch, cooltext, free online graphics, gradient bar, graphics generator, images logos, logo styles, new fonts, professional option

Firefox Has Been Hitting the Gym — Version 3.6 Is Faster, More Capable

In: web resources

22 Jan 2010

Mozilla has unleashed Firefox 3.6, the next version of the popular open source web browser.

The new and improved Firefox 3.6 is now available as a free download for Windows, Mac and Linux.

There isn’t much new to look at on the surface, but we’d strongly recommend you upgrade to Firefox 3.6, based on the work that’s been done to improve the browser’s speed and support for the latest web technologies.

Thursday’s release brings significant performance boosts and a number of new features like support for custom skins, full-screen support for native web video and much-improved font support for developers looking to use new fonts on their sites.

It arrives only six months after the previous version, Firefox 3.5. The shorter-than-usual wait between versions means that Firefox 3.6 doesn’t have quite as many new standout features as 3.5 brought to the browser when it debuted. But we don’t want to give the impression that Firefox 3.6 is only an incremental performance upgrade from the previous version.

A Nimbler Fox

The fact is that there’s quite a bit of new technology under the hood. Users who spend the bulk of their day in JavaScript-heavy web apps — which these days is most of us — will notice faster page loads thanks to improvements to the browser’s rendering engine. Much of the added speed is due to enhancements to TraceMonkey, Mozilla’s JavaScript-rendering engine.

Not only does the tweaked TraceMonkey speed up webpage rendering, it’s now available to speed up Firefox UI elements written in JavaScript. That change means the Firefox interface is snappier, and — when combined with the new version of Gecko, Firefox’s core rendering engine — there’s a noticeable improvement in Firefox 3.6’s overall performance.

In our testing of pre-release versions (the last of which were nearly identical to the final code), JavaScript-heavy sites like FriendFeed, Facebook and Gmail loaded faster, and the browser’s initial startup time was much better than with Firefox 3.5 — especially if you’re reopening a large number of tabs.

Also new under the hood is the new about:support page which offers a simple place to look up all the pertinent information about the current Firefox installation, including a list of installed extensions, any user-modified preference settings, links to installed plug-ins, and other configuration details.

Fullscreen HTML5 Video

Firefox 3.6 now supports fullscreen video playback through native HTML5 video embeds. Just right-click a video embedded using the HTML5 video tag and you’ll see a new menu item for full-screen playback.

Currently video on the web is generally embedded using proprietary technologies like Adobe’s Flash Player or Microsoft’s Silverlight plugin.

Native HTML5 video will give users a way to watch movies online without the need of third-party plug-ins.

Firefox previously supported HTML5 native video but lacked the ability to play those videos in full-screen mode, an oversight that Firefox 3.6 corrects, putting open source video on largely equal footing with proprietary technologies like Flash or Silverlight.

Curiously, Firefox 3.6’s release comes only a day after YouTube announced it would begin supporting playback of embedded videos with HTML5, albeit using the h.264 codec which Firefox does not support, as it’s proprietary. Mozilla prefers the open source Ogg Theora video format instead.

More Web-Standards Support

Web developers and open-web proponents alike will be happy to hear that quite a few new features in CSS 3 have made their way into Firefox 3.6. Firefox now supports the background-size property as well as some cool tricks for handling background images with CSS. Designers can specify the size of background images on web pages, stretching them by dictating what percentage of the browser window’s width they take up.

There are also some new methods for applying gradients to page backgrounds, enabling designers to create more interesting, colorful backgrounds without using images at all, just by defining a few colors in their HTML.

Firefox 3.6 also supports the Web Open Font Format (WOFF), which allows developers to use server-side fonts to build better typography into their designs.

Personas

Firefox 3.6 brings built-in support for lightweight themes, which Mozilla calls Personas. Personas have been around for a while (you can even sync them across multiple browsers if you’re running Weave, Mozilla’s syncing tool), but installing Personas previously required a separate extension to manage them.

Now Personas can be installed right out of the box, allowing you to tweak and theme Firefox as you’d like. Although Personas don’t offer quite the options of full-fledged themes, they’re much easier to create and install. If you’d like to try out some custom themes, head over to the Personas site.

Improved Tab-Switching Previews

Also new on the tab front are the long-awaited preview thumbnails in Firefox’s built-in tab switcher, which have finally arrived, sort of. The tab previews have been in the works for quite some time, and — sadly — enabling the previews will still require a trip to about:config (set browser.ctrlTab.previews to true).

Unfortunately for Windows 7 users, much of the Windows 7 integration — like Aero tab previews and jump lists — did not make the final release. Not officially, anyway.

According to Mozilla Director of Firefox Mike Beltzner, support for Windows 7’s Aero Peek tab previews — the page and tab previews available in the Windows 7 task bar — can be enabled in the about:config page. But the feature wasn’t quite ready to be switched on by default.

If you’d like to turn it on now, just be aware that sometimes the previews don’t render properly. Look for this one to be officially turned on by an incremental update in the near future.

Security Enhancements

Firefox 3.6 includes the ability to check for out -of-date plug-ins and will point you to the offending plug-in’s website to download the latest version.

The primary target here is the Flash plug-in, which previously had no update mechanism in Firefox and could leave Firefox users vulnerable to attack even if the browser itself was up-to-date.

Mozilla has also changed the way third-party add-ons integrate with Firefox. The Firefox components directory is now off-limits to third-party tools like Firefox add-ons. The move is mainly designed to make Firefox more stable by preventing add-ons from accessing lower-level tools that could cause crashes.

According to Mozilla, there are no features to be gained from accessing the components directory, so your favorite add-ons should not be adversely affected by the change.

Why the Long Wait?

Although the turnaround time for Firefox 3.6 was faster than its predecessor, Mozilla was still plagued by delays, and it released an unprecedented five beta versions to testers before Thursday’s final release.

However, while there were more betas than previous releases, according to Mike Beltzner, Mozilla’s Director of Firefox, the overall development time was actually shorter.

“We did something very different with betas this time around, and this has been one of the shortest beta periods in terms of calendar time that a Firefox release has ever had,” Beltzner tells Webmonkey.

“Once people have agreed to test a beta, it’s our responsibility to give them updates as quickly as possible. Instead of spending three to four weeks making changes and releasing a beta, for Firefox 3.6 we decided to create a beta version that would be updated every one or two weeks with the latest changes.”

He says that cranking out more betas at a faster pace made development smoother and allowed for more feedback from Mozilla’s community of over 600,000 beta testers.

Conclusion

Firefox 3.6 is not the radical overhaul that Firefox 3.5 offered, but the latest version is a worthy upgrade nonetheless. The welcome speed improvements combined with the UI changes and expanded HTML5 support make Firefox 3.6 a must-have upgrade.

We’re already looking forward to the next version of Firefox, tentatively listed as Firefox 3.7, which, with any luck will bring isolated tabs for application crashes (a la Google Chrome), integration of the Ubiquity add-on into the Awesome bar and of course, even more enhancements for HTML 5.

See Also:

Go to Source

No Comments
Tags: added speed, code javascript, custom skins, native web, new fonts, open source web, standout features, ui elements, web apps

Review: Typekit Delivers Custom Web Fonts to the Masses

In: web resources

12 Nov 2009

A new service called Typekit is now offering a legal, cloud-based method of using more elaborate typefaces on the web. The service has come out of beta and is serving up its fonts to web designers.

Despite some inconsistencies between browsers (not Typekit’s fault) and a few other quirks, we found Typekit to be a viable option for web designers looking to incorporate custom fonts into their designs.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut-and-paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

Of course that ease and convenience doesn’t come without a price. There is a free trial option for Typekit, which allows you to test out the service. But if you’re serious about custom fonts, you’ll want to go with one of the paid options which range from $25 to $250 per year. The more you spend, the more font choices, domains and bandwidth you’ll get.

Typekit arrives at a time when type on the web is at a crossroads. For years, designers have been limited to using only a set of five or six common fonts on web pages. But thanks to new font rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions. Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts.

Along with Typekit’s arrival, we’ve seen other promising developments recently, like the move by some browser makers towards adopting a new font format called WOFF which would allow better control over layouts and designs.

To see how Typekit performed in the wild, we opted to try out the free option and see if Typekit was good enough to warrant the expense. The short answer is yes, but with some drawbacks.

Before you dive in to Typekit, it’s important to remember the one very large caveat — Typekit only works in browsers that support the CSS @font-face rule. That means Firefox 3.5 and higher, Safari 3.4 and higher, and Internet Explorer 6 and higher.

While that’s not ideal, the good news is that browsers that don’t understand Typekit’s fonts can simply fall back on a default you’ve defined.

There is another slight problem, though. In some cases, fonts rendered in browsers on Windows XP can look jagged and difficult to read. The problems is that Windows XP often doesn’t have anti-aliasing turned on by default. Of course it’s worth noting that even if you don’t use @font-face, standard fonts will also be jagged on such systems. The difference is that most of the standard fonts are still readable, while in some cases custom fonts become a total disaster.

To get started with Typekit, just create an account and tell Typekit the domain where you’ll be serving the fonts. We were happy to see that Typekit will support the localhost domain for testing purposes, something many online services and APIs overlook.

After your account has been created and your domain set up, Typekit will then give a snippet of HTML to include on your site. The code simply loads Typekit’s JavaScript library, all you need to do is paste the HTML in the <head> of your site.

Now it’s time to pick some fonts. Typekit’s range of fonts depends on the amount of money you want to spend. For a trial account you’ll have just under 70 fonts to choose from. The “personal” library ($25/year) has roughly 230 fonts and the full library ($50/year) nearly 300.

The Typekit font browsing interface is very well designed and offers some nice tools for choosing a good font — like a live-preview of the font and numerous size previews for judging readability.

Typekit’s live preview tool with custom text. Click the image for a larger view.

Once you’ve selected a font, you’ll need to configure it for your site. The Typekit Editor lets you control which CSS selectors your custom fonts will be applied to, which weights and styles to use and what font to fall back on for browsers that don’t understand @font-face.

If you’d rather apply a font to all elements on your site, you can define your own custom font-family rules in your CSS file, for example h1 {font-family: "tenby-seven-1"} would apply the Tenby Seven font to all headlines on the site.

Typekit’s editor tool for customizing fonts. Click the image for a larger view.

The next step is to publish your font, which then makes it available on your domain.

The results looked great in our testing, especially in Safari 4, which seems to render type a bit thinner than Firefox on the Mac. On the Windows side the results were roughly the same between browsers that supported Typekit.

One thing that seems unavoidable with @font-face, whether it’s through Typekit or otherwise, is a brief flash of un-styled text. It’s annoying, but for now there doesn’t seem to be anything you can do about.

There are some other drawbacks — the need for JavaScript and the additional data that increases page load times — but so long as you’ve already accepted @font-face’s shortcomings, Typekit makes the process of using it simple and easy. Other possibilities for broadening your type selection include Typotheque and a new service Kernest.

See Also:

Go to Source