    
|
The Timed Text Working Group has published a Proposed Edited Recommendation of Timed Text Markup Language (TTML) 1.0 (Second Edition). TTML 1.0 provides a standardized representation of a particular subset of textual information with which stylistic, layout, and timing semantics are associated by an author or an authoring system for the purpose of interchange and potential presentation. In addition to being used for interchange among legacy distribution content formats, TTML Content may be used directly as a distribution format, for example, providing a standard content format to reference from a <track> element in an HTML5 document, or a <text> or <textstream> media element in a SMIL 2.1 document. Comments are welcome through 06 August. Learn more about the Video in the Web Activity.
]]>|
|
The Web Real-Time Communication Working Group and Device APIs Working Group have published the First Public Working Draft of Mediastream Image Capture. This document specifies the takePhoto() and getFrame() methods, and corresponding camera settings for use with MediaStreams as defined in Media Capture and Streams. Learn more about the Ubiquitous Web Applications Activity.
]]>|
|
|
|
|
|
Every great designer knows that the wrong font can totally change the direction of a project. It’s why we use Helvetica instead of Comic Sans and why we should stop using fonts like Lobster (yea…I said it!). Designers just have to know fonts.
Choosing the right font is a task. If you choose something too round, you risk making it look too youthful. Or if you choose something too bold, you may end up taking out the cheer in a design. It’s honestly one of the toughest jobs for amateurs and professionals alike.
There are tons of font sites out there that offer us free fonts for our designs. The problem is, honestly, most of them suck. They feature overused and cheesy fonts that many of us just don’t want and shouldn’t use. Well, have no fear! Today we’ve put together a list of places the really, really good fonts like to hide. If you do some snooping, you’ll find something awesome. So, let’s jump right in.
I never understood it, but most people who look for free fonts never go to the sites where you pay for fonts. While that sounds like perfect logic, they dismiss the fact that there are many authors who give out free demos of fonts or allow a certain weight and type to be downloaded for free. MyFonts is one of those sites and if you do a pretty specific search, you can find all the free fonts at once.
Many of us use Google Fonts as a way to use free webfonts online. It’s honestly one of the best free services available by Google. But they have so many fonts and the interface isn’t that conducive for finding fonts, especially for a project. Now, you can just open up a web search to find and download the font of your choice, but Fonts.com allows you to download and sync any of the Google fonts to your desktop for your use.
HFT is another font site that’s known for selling high quality fonts. Whereas with MyFonts you have to do a bit of snooping for your free fonts, Hype For Type has already gathered them and made them available for your downloading pleasure.
This is a pretty well known site with a manifesto that aims to push the open source type movement. Quite frankly, they make some extremely high quality, trendy and all around useful fonts that you should really have in your arsenal if you don’t already. They have a strict process for getting fonts through to the consumer, so you know you’re getting some great work.
Dribbble is like show and tell for designers. Most of us are freelancers, cooped up in our offices with no one to talk to. Okay, it’s not that awful, but Dribble is a great resource for getting feedback on things you’re working on. Every so often, you’ll get someone who uses Dribbble more as a promotional tool for something available for free or download. With some good snooping, you can find some free (and sometimes exclusive) fonts available on Dribbble.
TypeTogether was created when two font designers came together and decided they wanted to make really awesome fonts for the world. While they can and have created some customized fonts for businesses, these two also offer free fonts to other designers. You’ll want to pay attention when you go to download these, as most require a discount code (that’s provided) in order to get them for free.
Again, we’ve found a paid font service that openly offers free fonts. While Fonthaus isn’t one of the most popular and high quality font retailers, you can do some digging to find a font that works for your taste.
Fontstruct is a web app that allows designers to essentially create their own typefaces with ease. I’ve personally played around with Fontstruct before and found it mildly confusing, however, there have been others who have found great success with it. Designers are encouraged to share the fonts they’ve created and many are available for download at Fontstruct.
This is a co-op brought together by two guys who just wanted to offer some unique, trendy high quality fonts to people on a pay-what-you-want model. I assume people don’t want to purchase fonts because you end up getting a family of 5 weights for $300 — that may seem steep to some. So at Lost Type you can pay what you want, even if it is $0.
This blog seems to do a lot of snooping for you as they offer many free fonts available all over the place. Some designers even send them exclusive fonts to share with their readers. This is a great site to peruse to find some really awesome fonts.
The Type Depot is a font design studio based in Bulgaria headed by two people who wanted to make some great fonts. While you won’t find a ton of fonts here, there a couple free ones that are so imaginative and just great to have on deck for any upcoming designs.
I would recommend DeviantArt to amateur designers who want to get some of the best fonts available. Many users at DA create zip files with hundreds of fonts in them. Every so often, you’ll find a font designer put up a new font that’s available for download as well. So the best thing to do at DeviantArt is to keep a look out on some of things coming in. You can sometimes find a real gem.
Much like Dribbble, Behance is a place for designers to show off their work. You can discover people through all types of search queries such as location, skill set, programs used and much more. One of the more popular skillsets is Typography and every so often when you peruse through it, you see someone promoting a new font they’ve made.
One of the best ways to find some of the best free fonts is to look through some of the leading font foundries. Font Fabric is one of them and offers some great free font families as well as some at really affordable prices. If you cannot find a great free font on some of these larger sites, you definitely want to make sure you’re checking in with some font foundries.
Whenever I’m asked to recommend a website for designers to download free fonts, Font Squirrel is my first choice. Most of these fonts are not only free, but they’re free for commercial use as well. Font Squirrel also has @fontface kits for most fonts and they also have a web font generator for those that do not. This is a site all designers should keep bookmarked.
Hopefully, this list has shown you some things that you’ve never seen before and something that’s useful to you and your next project. Once you’re tired of the free fonts (which will probably be never) don’t be afraid to make a solid investment in a wonderful font that you find simply amazing. Best of luck in your search!
What’s your favorite source for free fonts? Have we missed a resource you can’t do without? Let us know in the comments.
| Responsive WordPress Lightbox with Social Sharing – only $13! |  |
|
|
Every great designer knows that the wrong font can totally change the direction of a project. It’s why we use Helvetica instead of Comic Sans and why we should stop using fonts like Lobster (yea…I said it!). Designers just have to know fonts.
Choosing the right font is a task. If you choose something too round, you risk making it look too youthful. Or if you choose something too bold, you may end up taking out the cheer in a design. It’s honestly one of the toughest jobs for amateurs and professionals alike.
There are tons of font sites out there that offer us free fonts for our designs. The problem is, honestly, most of them suck. They feature overused and cheesy fonts that many of us just don’t want and shouldn’t use. Well, have no fear! Today we’ve put together a list of places the really, really good fonts like to hide. If you do some snooping, you’ll find something awesome. So, let’s jump right in.
I never understood it, but most people who look for free fonts never go to the sites where you pay for fonts. While that sounds like perfect logic, they dismiss the fact that there are many authors who give out free demos of fonts or allow a certain weight and type to be downloaded for free. MyFonts is one of those sites and if you do a pretty specific search, you can find all the free fonts at once.
Many of us use Google Fonts as a way to use free webfonts online. It’s honestly one of the best free services available by Google. But they have so many fonts and the interface isn’t that conducive for finding fonts, especially for a project. Now, you can just open up a web search to find and download the font of your choice, but Fonts.com allows you to download and sync any of the Google fonts to your desktop for your use.
HFT is another font site that’s known for selling high quality fonts. Whereas with MyFonts you have to do a bit of snooping for your free fonts, Hype For Type has already gathered them and made them available for your downloading pleasure.
This is a pretty well known site with a manifesto that aims to push the open source type movement. Quite frankly, they make some extremely high quality, trendy and all around useful fonts that you should really have in your arsenal if you don’t already. They have a strict process for getting fonts through to the consumer, so you know you’re getting some great work.
Dribbble is like show and tell for designers. Most of us are freelancers, cooped up in our offices with no one to talk to. Okay, it’s not that awful, but Dribble is a great resource for getting feedback on things you’re working on. Every so often, you’ll get someone who uses Dribbble more as a promotional tool for something available for free or download. With some good snooping, you can find some free (and sometimes exclusive) fonts available on Dribbble.
TypeTogether was created when two font designers came together and decided they wanted to make really awesome fonts for the world. While they can and have created some customized fonts for businesses, these two also offer free fonts to other designers. You’ll want to pay attention when you go to download these, as most require a discount code (that’s provided) in order to get them for free.
Again, we’ve found a paid font service that openly offers free fonts. While Fonthaus isn’t one of the most popular and high quality font retailers, you can do some digging to find a font that works for your taste.
Fontstruct is a web app that allows designers to essentially create their own typefaces with ease. I’ve personally played around with Fontstruct before and found it mildly confusing, however, there have been others who have found great success with it. Designers are encouraged to share the fonts they’ve created and many are available for download at Fontstruct.
This is a co-op brought together by two guys who just wanted to offer some unique, trendy high quality fonts to people on a pay-what-you-want model. I assume people don’t want to purchase fonts because you end up getting a family of 5 weights for $300 — that may seem steep to some. So at Lost Type you can pay what you want, even if it is $0.
This blog seems to do a lot of snooping for you as they offer many free fonts available all over the place. Some designers even send them exclusive fonts to share with their readers. This is a great site to peruse to find some really awesome fonts.
The Type Depot is a font design studio based in Bulgaria headed by two people who wanted to make some great fonts. While you won’t find a ton of fonts here, there a couple free ones that are so imaginative and just great to have on deck for any upcoming designs.
I would recommend DeviantArt to amateur designers who want to get some of the best fonts available. Many users at DA create zip files with hundreds of fonts in them. Every so often, you’ll find a font designer put up a new font that’s available for download as well. So the best thing to do at DeviantArt is to keep a look out on some of things coming in. You can sometimes find a real gem.
Much like Dribbble, Behance is a place for designers to show off their work. You can discover people through all types of search queries such as location, skill set, programs used and much more. One of the more popular skillsets is Typography and every so often when you peruse through it, you see someone promoting a new font they’ve made.
One of the best ways to find some of the best free fonts is to look through some of the leading font foundries. Font Fabric is one of them and offers some great free font families as well as some at really affordable prices. If you cannot find a great free font on some of these larger sites, you definitely want to make sure you’re checking in with some font foundries.
Whenever I’m asked to recommend a website for designers to download free fonts, Font Squirrel is my first choice. Most of these fonts are not only free, but they’re free for commercial use as well. Font Squirrel also has @fontface kits for most fonts and they also have a web font generator for those that do not. This is a site all designers should keep bookmarked.
Hopefully, this list has shown you some things that you’ve never seen before and something that’s useful to you and your next project. Once you’re tired of the free fonts (which will probably be never) don’t be afraid to make a solid investment in a wonderful font that you find simply amazing. Best of luck in your search!
What’s your favorite source for free fonts? Have we missed a resource you can’t do without? Let us know in the comments.
| Top-Selling Vintage Veneer Font Family – only $9! |
|
 |
High-definition (or “Retina”) displays have spread wider and wider, and evidently their numbers will keep growing. So, as creators of products that will be consumed on Retina devices, we have to optimize our design and development workflow accordingly.
Slicing graphics from finished designs to use for development is one of the less enjoyable parts of building a website or app. And it takes a long time. Because slicing is a monotonous and straightforward task, using the right tool and workflow can save you hours or even days of work.
Preparing graphics for development mostly entails saving user-interface elements from the final mockups, with transparent backgrounds. And to support Retina displays, we also need to create double-sized versions of elements.
Upon failing to find a tool that fits my design team’s workflow, I created a set of two time-saving Photoshop actions for slicing graphics for Retina and standard displays. The great feedback from my team inspired me to share it with other designers. The tool has gotten good buzz in the Web design and front-end development community, so today I’m happy to introduce Retinize It on Smashing Magazine.
Retinize It uses Photoshop actions and retina.js to optimize for Retina displays.
Select one layer, several layers or a group of layers, and run the action. Once you’ve activated it, you just need to name the files and set the directory to save them to.
In the background, Retinize It copies the selected layers to a new file, makes the background transparent and trims the space around the element. Once that’s done, the action asks what you want to name the file, saves it, scales the original element by 200%, and saves that as a separate file. After this process, you’ll be returned to the original file.
Almost all of it. The only thing you have to do is choose the directory and name the files. Remember to add a high-resolution modifier, @2x, for the Retina versions of the files. This convention was established in Apple’s iOS Developer Library.
If you’re building an iOS application, then you’ll need to provide a background and splash screen in three resolutions: standard (320 × 480 pixels), Retina (640 × 960 pixels) and iPhone 5 (1136 × 640 pixels). The naming convention for the standard and Retina versions is straightforward. For images for the iPhone 5’s screen resolution, Apple recommends adding a -568h@2x suffix, although Apple doesn’t require it.
Apparently, this happens because Xcode does not automatically associate -568h@2x images with the iPhone 5’s resolution; developers may set the suffix manually for this kind of file. I’ve worked with an iOS developer who has asked Apple to add a @5x suffix. So, the best way to determine the naming convention for iPhone 5 images in future is to ask your developer. In other cases, use the -568h@2x suffix.
The techniques presented in the article “Towards A Retina Web” bring the @2x convention from mobile apps to the Web, helping us to optimize websites for Retina displays very quickly.
Retinize It is good for those who start designing at non-Retina sizes, which is a better practice for two reasons. First, the non-Retina version of an image will look much closer to the final product, giving you more accurate feedback on how the design will actually look.
Secondly, an element with an odd size value that is scaled by 50% will end up with a x.5 pixel value, making the element blurry. Bjango explains this issue in his article “Designing for Retina Display,” as does Niklaus Gerber in his article “Designing for the iPhone 4.”
The non-Retina action in this pack will work with any kind of layer. If you’re using the Retina version, then you should work with shapes and smart objects, so that the 200%-scaled file will not look pixelated.
Also, if your layer has an inner or drop shadow, then uncheck “Use Global Light”; otherwise, those effects in the sliced version of the layer will inherit Photoshop’s default angle.
The set includes two Photoshop actions:
A specification created by PNG Express
If you will be having limited interaction with the developer who will be coding your design and you’re not sure it will be pixel-perfect, PNG Express can be a great time-saver. It helps you to create specifications with instructions on element positions, margins, fonts and font sizes.
PNG Express also has an option for slicing images including Retina support.
ImageOptim reduces image sizes while maintaining quality. The tool removes internal data embedded by graphics editors, such as comments and color profiles. I recommend adding an images folder from your website to this app before compiling and going live. ImageOptim will reduce around 30% of an image’s size on average.
Slicy is great-designed tool most designers and developers are using for slicing graphics for iOS apps. The tool exports graphics from PSDs automatically, but it requires to organize your layers in Photoshop and name them in certain way. In addition once you make changes in Photoshop, Slicy updates the slices automatically. The main reason I decided not to use Slicy is no ability for quick export for couple of elements from PSD without preparing it for Slicy.
(al)
© Artiom Dashinsky for Smashing Magazine, 2013.
]]>