background preloader

Reference

Facebook Twitter

Setting Weights And Styles With The @font-face Declaration. Image processing - "River" detection in text - Signal Processing Beta - Stack Exchange. I have thought about this some more, and think that the following should be fairly stable. Note that I have limited myself to morphological operations, because these should be available in any standard image processing library. (1) Open image with a nPix-by-1 mask, where nPix is about the vertical distance between letters #% read image img = rgb2gray(' %# threshold and open with a rectangle %# that is roughly letter sized bwImg = img > 200; %# threshold of 200 is better than 128 opImg = imopen(bwImg,ones(13,1)); (2) Open image with a 1-by-mPix mask to eliminate whatever is too narrow to be a river. opImg = imopen(opImg,ones(1,5)); (3) Remove horizontal "rivers and lakes" that are due to space between paragraphs, or indentation.

To remove lakes, we can use an opening mask that is slightly larger than nPix-by-nPix. (4) If we're interested in not only the length, but also the width of the river, we can combine distance transform with skeleton. Typography Magazines, Journals and Hubs. Part 1 | Blog. If you’re into typography, you know there’s more to life than just staring at types in the street, on walls and websites.

You also subscribe to typography magazines that feed your addiction, right? On which you spend a certain amount of money or time, or both. We’re talking about those publications that focus on typography before anything else. Today we give a helping hand to those beginners who are still looking for typography magazines out there to keep them updated with the most important news in the business, new exciting designers and not to be missed events.

We picked a few of them today, but we’ll be back with more next week. There is no particular order. How could it be, de gustibus non disputandum est, right? Limited Editions Some of the best print magazines on typography are limited edition, resembling a luxurious extension to an online shop or publication. Back to Uni The Typographic Hub is part of the Birmingham Institute of Art & Design at Birmingham City University. 10 Infographics That Will Teach You About Typography. Typography is a crucial component of great designs involving text, so knowing as much as you can about it is an important step to becoming a great designer. This roundup of infographics will help you discover new and interesting things (as well as reinforce and reiterate stuff you already know) about typography.

Click the Go to Source link under each infographic to navigate to the source of the infographic and to see the larger version provided by the creator of the infographic. 1. Bold & Justified: The Huge World of Typography Infographic Did you know that Israel is the source of the most expensive typefaces? Or that Helvetica has 111 different styles? This information-dense infographic reveals a ton of interesting facts about typography. Go to Source 2. This beginner’s guide to type shows you some popular font categories (like monospaced fonts and script fonts), the anotomy of a typeface, a few typography principles, and more.

Go to Source 3. Go to Source 4. Go to Source 5. Go to Source 6. 7. Font kerning: 10 expert tips | Typography. Kerning is the process of adjusting the spacing between letters to achieve a visually pleasing result. Some designers find it easy, others find it a tricky process where success is achieved more by luck than real judgement. But follow these tips and you should find yourself on the right track... 01. Choose your typeface early on Each typeface requires its own kerning and specific adjustments and attention to detail. 02. The main focus of kerning is usually the spacing between characters, but don't forget the spacing between words as well. 03. Remember that some letters that don’t kern as well as others within a word. 04. You may hear other designers talk about 'tracking' and assume it's the same thing as kerning. 05.

Like mastering any technique, the best and most effective way to improve your kerning skills is through practice. 06. 07. Another useful exercise for kerning is to turn the typeface upside-down. 08. 09. 10. Words: Meryem Meg and Brian Hoff Like this? Fsfinalbook_single.pdf. Responsive Typography: The Basics. By Oliver Reichenstein When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself. Used to. Until recently, screen resolution was more or less homogenous. Today we deal with a variation of screen sizes and resolutions.

This makes things much more complicated. In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design.

Adaptive layouts: adjusting the layout in steps to a limited number of sizes Liquid layouts: adjusting the layout continuously to every possible width Note: Responsive design already incorporates a lot of macro typographic issues (type size, line height, columns width). Choosing a typeface The right tone Serif or sans serif? How to Use Icon Fonts in Your Website. Icon fonts are quickly becoming a web design trend and there is a good reason for that. Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS. The days of creating two different icon images for rollovers or effects are long gone. Now we can easily change color, size, and even animate the icons just as we would most other HTML elements.

Aside from giving designers and developers more control, icon fonts also offer many features that bitmap image icons simply do not. Because the icon is a font, it has the same properties as all other fonts. That means it is completely vector and scales perfectly no matter the size. Here is a demonstration of how icon fonts look scaled up compared to bitmap icons.

As you can see, the bitmap icons get pixelated while the vector font icons scale up fine and look as sharp and precise as they did in a smaller size. One other advantage we get with icon fonts is load time. Step 1: Load The Font via @font-face Other Methods. Sans Serif Fonts: Most Popular Typefaces, Best for Webfonts. As San Serif typefaces have only been around for about 100 years, it is necessary for designers or enthusiasts to have an understanding how it all came about. Based on known historical accounts, officially, modern sans serif has been created on 1816 by William Caslon IV at the English Type foundry. The English Egyptian Typeface is designed only in capital letters in 28 points. Nevertheless, Caslon was not fully convinced on the success of the English Egyptian. Design-wise, the very first sans-serif type bears no value.

Then came; Akzidenz Grotesk created in Berlin at the German Berthold type foundry. The history and overall design of Akzidenz Grotesk was far more interesting and became an instant hit. Why grotesk / grotesque? When the first typefaces of this sort came about in the 1830, people first considered them as blatantly grotesque and due to their controversial appeal; they are a rarity in texts and other printed forms with an exception of advertising. Why sans Serif? Supria Sans. Choosing web fonts: 15 expert tips | Web design.

Over the last few years, the possibilities for using type on the web have expanded enormously. In the bad old days of the web, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same, or using images to replace the type – a clunky solution that caused problems for the reader and technical problems in the browser. Nowadays, though, you can access an astonishing array of professional typefaces for use on your sites, bringing the aesthetics of print design to the web. Since around 2010, widespread support of @font-face in all the major browsers, plus a new web open font format, WOFF, has led to a technical revolution and the rise of a number of web font hosting services. These companies allow users to pay a subscription to host an enormous range of web fonts on their website.

Tim Brown is the type manager at Typekit. 01. 02. 03. The web may move at lightning speed, but quality typesetting requires lots of patience. 04. 05. 06. 07. 08. 09. Understanding The Difference Between Type And Lettering.