D2 Coding 1.3.1 글꼴

https://github.com/naver/d2codingfont

D2 Coding 글꼴은 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴입니다. D2 Coding 글꼴은 코딩시 유사한 형태의 영문/숫자 뿐만 아니라 한글/특수문자 등에 대한 변별력과 가독성을 강화하였습니다. 또한 고정폭 글꼴로 제작이 되어 어떤 개발환경에서도 자간과 행간을 유지하도록 디자인되어 있습니다.


. . .
Posted by 홍반장水 홍반장水
TAG D2, font, 폰트

[FONT] Google Noto Font 


Beautiful and free fonts for all languages

When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text.

Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”. Noto has multiple styles and weights, and is freely available to all. The comprehensive set of fonts and tools used in our development is available in our GitHub repositories.


https://www.google.com/get/noto/



...

Posted by 홍반장水 홍반장水

FlowType.js: Better responsive typography

FlowType.js sets your font-size and line-height based on your element width, making your typography fully responsive. You’ll have the perfect number of characters per line regardless of screen size.

flowtype

 

Posted by 홍반장水 홍반장水

Why Web Icon Fonts are brilliant

http://www.crearegroup-webdesign.co.uk/blog/videos/web-icon-fonts.html


Posted Friday 14th Dec 2012 by Rob Bavington 1 Comment

My brother James and I have been chatting a lot over the past week about how amazing Icon Web Fonts are, so I’ve put together a little video blog to show the key benefits. If you’re unfamiliar with Icon Fonts, they’re not too dissimilar from Wingdings. They’re useful, lightweight, modern typefaces that are perfect for displaying icons on your website without the baggage that often comes with using images.

Now we’ll talk about these specific Icon Fonts in a moment, but typefaces like Font Awesome, which is free, or Fico carry huge benefits to designers – which is probably why they’ve been so popular with web designers in 2012.

You can think of Icon Fonts as any normal font or web-font. As a designer you can easily adjust the size, colour and even add shadows with CSS. Icon Fonts work in almost all browsers including IE6, which means you get transparency without messing around with any ugly hacks. Most importantly, a lightweight or hand-picked Web Icon Font will load quicker in the browser that it’s image counterpart which will help with your page-speed optimization.

Web Icon Fonts have been huge in 2012

James and I think there’s 3 simple, key reasons why Icon Web Fonts are so popular in 2012:

  1. The icons are simply pretty cool and modern
  2. Responsive web design
  3. Retina displays.

So with Responsive web-design, there’s a good chance that you might want to increase or decrease an icon’s size, particularly if you’re using it within a button. Just like text, you can use media queries to simply change the type size without needing to reference a different image file. And unlike raster, pixel based images – Icon Fonts are vector so they look crisp at any resolution.

If you haven’t already, we’d recommending heading over to some of the many Icon Fonts available online. Like we mentioned earlier, Font Awesome is a great starting point as their current free set includes over 200 icons and can be installed and used on your website within minutes.

There’s also plenty of premium paid Icon Fonts and also great tools like Fontello where you can create your very own hand-picked, lightweight hybrid Icon Font by combining the best of the free Icon Fonts available.

So, wrapping up – we’re pretty confident that Icon Fonts are going to continue in popularity in 2013. It wouldn’t surprise us if the Google Web Font archive dons a set or two in the near future.

Example results when using Font Awesome, as shown on their web page.

Example results when using Font Awesome, as shown on their web page.

Web Icon Fonts & SEO

Also, don’t worry about the potential SEO headache of having random single letters hanging around your HTML markup. Icon Font Packs, like Font Awesome for example, have been set-up so that you can render with empty italic tags.

If you refer to the embedded image opposite, and the HTML markup below, you can see how the empty italics tags are used with a class to render icons in a similar fashion to how we might use span tags.


1
2
3
4
5
6
7
8
</pre>
<ul class="nav nav-list">
    <li class="active"><a href="#"> Home</a></li>
    <li><a href="#"> Library</a></li>
    <li><a href="#"> Applications</a></li>
    <li><a href="#"> Settings</a></li>
</ul>
<pre>


Thanks for watching this week, check out our supporting post for more resources and live examples of Icon Fonts in action from around the web.


Posted by 홍반장水 홍반장水
TAG font, Icon, style

Font Custom is a tool that will generate custom icon webfonts from the comfort of the command line. It is very easy to use, all you have to do is create a directory for your svg and eps files. Then, on the command line, run: fontcustom watch /path/to/vectors
Font Custom will then create the font and CSS file. It will also continue to run and watch the folder for changes, so you don't have to manually re-run it each time you update the vector set.
Font Custom - Custom icon webfonts from the command line

Posted by 홍반장水 홍반장水
TAG font, style

15 Online HTML5 Tools for Web Designers

by Andy on October 10, 2012

image

Online HTML5 tools are quite useful for web designers who wants to forge ahead of the competition, and have more satisfied clients. It is of course important to follow developments and keep an eye on new tools that emerge.

HTML5 is the new version of the markup language HTML that has been used for presenting and structuring online contents since the early 90s. It is an internet core technology that was proposed originally by Opera Software. If you want to learn more of it’s background and history these HTML5 infographics can help you. HTML has been standing in the shadow of other frameworks like Flash and IE, but the word is, that this is going to change with the arrival of HTML5. As of today, HTML5 is still being developed, but believe me, it is here to stay.

HTML5 has opened a window of opportunities for web designers. Online web design tools based on HTML5 makes it easier to incorporate audio, video, drag and drop, fonts, animations and graphics into web pages. HTML5 also helps web designers build mobile friendly website themes to ensure excellent user-experience when surfing the Internet on mobile devices. However, since such tools are fairly new, some people may still be unaware of their true potentials. Also, some web designers still want to use Flash and other popular framework as their primary tool set.

Below, I have listed 10 useful online HTML5 tools. They can provide developers and web designers with manoeuvrability in making websites more convenient, productive and attractive.


Moqups – HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts. You can go to their blog and read more about this highly popular project.

moqups

Fontdragr – Online Font Testing Tool

If you are a designer, you might find it difficult to choose a decent font. However, using this online font testing tool can make the process much easier. You can view any font you want in a webpage without changing its CSS or HTML code.

fontdragr

Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave is a new playground for developers and designers to test HTML, CSS and Javascript. Liveweave editor has built-in context-sensitive autocompletion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.

liveweavwe

Adobe Edge Animate

Edge Animate will allow you to create animated and interactive web contents. It has an easy to use and intuitive interface, precise control, broad reach and more.

adobe-edge

HTML KickStart

HTML KickStart is not really a tool, it is a set of HTML5, CSS, and jQuery building blocks for website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

html5-kickstART

Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go. Currently compatible only with the latest version of Firefox and Chrome.

stitches

Create – Web Editing Interface

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

create

SpriteBox Online HTML5 Tool

These days, compressing images seems to be the rage. By placing your photos in a Sprite, you can increase the rate of your loading times as well as image transitions. Online Sprite Box Tool will aid in designing photos into sprites with the use of HTML5, CSS3 and jQuery.

sprite-box

Online Velocity Sketch Tool

This unique HTML 5 online canvas drawing tool can make creative, strange looking creations. Use this HTML5 tool to come up with something really awesome for your designs.

velocity-sketch

On/Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating your own HTML5/CSS3 “On and Off” flipswitches with optional animated transitions.

on-off-switch-generator

Online SVG to HTML5 Canvas Tool

Most vector art packages such as Inkscape and Illustrator can export SVG or Scalable Vector Graphics elements. This tool will allow you to convert SVG files into its HTML 5 canvas equivalent.

svg-to-html5

Online 3D Sketch Tool

This sketch tool uses the capability of HTML canvas in creating 3D drawing. The tool will allow you to draw with dashed lines and vibrate your drawing. You can also rotate the 3D canvas by dragging with the cursor horizontally while pressing down the Space Bar.

sketch-tool

Online Pattern Generator Tool

This is an online tool that can be quite useful for creating header and page backgrounds. Designers can even use the tool to create heading backgrounds. The tool will allow you to try out any pattern you want in just a few seconds.

pattern-tool

Online XRay Tool

Online XRay Tool allows designers to quickly view the details of various page elements that are present in any webpage with just a few clicks of the mouse. Just drag the website bookmarklet into your own book bookmarks, go to the webpage you like to analyze, click on the XRay bookmark and then click on any element of the page. The tool can take care of HTML5 elements like canvas and give you the design data you need. online-Xray-tool

Online HTML5 Audio Maker Tool

Among the best features of HTML5 is the introduction of the audio tag. This tool will help designers get familiar with the newest audio features being offered by HTML5. Even more interesting is the fact that designers can play, not just with audio, but also with video integration using this HTML5 online tool.

html5-audio

Group Discussion!

Please tell us what you think of these HTML5 tools by adding your comments below. And please, if you have considerable experience with an online HTML 5 tool not included in my list, let me know about it. You are also welcome to share this article to your friends and colleagues.

Posted by 홍반장水 홍반장水