A New Type Of Font by Google, Apple, and Microsoft

Google, Apple, And Microsoft Are Quietly Developing A New Type Of Font. “What are variable fonts, and why are some of the biggest tech companies on the planet throwing their weight behind them?”

PaymentFont 

PaymentFont — A sleek Payment Webfont. A sleek webfont containing 95 icons of all main payment operators and methods

Twitter Bootstrap, LESS CSS, and Caching Problem

I’m working on some works right now with a small team at the office. We decided to use Bootstrap as the front-end development framework. We came up with this solution for some key reasons:

  • We need to do it fast.
  • It’s easy to maintain, especially for a collaborative project
  • Bootstrap is cool.

There are lots of similar frameworks to choose like Skeleton, 960.gs, Blueprint, Foundation, and more. It didn’t take long discussion to take Bootstrap. Its features and flexibilities are just perfect for our need. The next thing is that we need to do some customisations, for example on the font sizes and colours. Since Bootstrap might release updates in the future, it’s better to leave the core files untouched.

LESS

Basically, it’s easy to customise them by using its own customisation tool. But, I prefer another method by using LESS. And yes, Bootstrap works great with LESS. The installation works straight forward. After downloading less.js file, add these two lines in the <head>

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Inside bootstrap.less file, there is a little note that we can easily modify the font color and size by working on the variables.less file. I decided not to edit it. I created another .less file — for example: mycustom.less — and import it from bootstrap.less file. So, my bootstrap.less file looks like this:

...
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";
// My Custom LESS
@import "mycustom.less";
...

And, this is what I have for mycustom.less:

@baseFontSize: 13px;
@tableBorder: #ddd;
@navbarInverseBackground: #faa141;
@navbarInverseBackgroundHighlight: #ec8b22;
@navbarInverseBorder: #d77c1b;
@navbarInverseLinkColor: #fff;

It should just work. But, does it work as expected? No.

Caching

Editing and saving mycustom.less file, and refreshing my page does not load the latest variables. It takes time to refresh/load the latest changes. It’s not good. It happens because less.js caches the .less files called using @import.
I tried to modify the web server setting by adding these lines in my httpd.conf file:

<FilesMatch ".less$">
Header set Cache-Control "no-cache"
</FilesMatch>

But, it didn’t work. After searching for solutions, there is a method offered for this issue. I added this line of code:
<script>localStorage.clear(); </script>
Now, whenever I make some changes on my .less files, reloading the page will give the latest changes. It works.

Fico

Fico is a font with 52 simple, commonly used icons and glyphs, served on the web via @font-face. It’s scalable, tidy, color-agnostic, quick & easy, nicely aligned, and small.

Google Font Directory

Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. See also: Quick Start Guide and FAQ page.

Fonts 500

Fonts500.com — great collection of free fonts from around the web. Browse the collections, choose and download your favorite fonts.

Ecofont

ecofont
Ecofont is a font type that encourages ink-saving print. This font is developed by SPRANQ. Using Ecofont, some parts of the letter is omitted — so you should see some white dots there. It is said that this font works great for OpenOffice, AppleWorks and MS Office 2007. Ecofont is available for free and supports both PC and MAC.
(hat tip: akuinginhijau.org)

Features for Developers (Firefox 3.1 beta 1)

Okey, this should be a good news.
Geolocation

Geolocation is a JavaScript API that lets a web page query the browser’s location via JavaScript. It can be used to plot maps, give directions, attach location information to pictures, give a location for a weblog post and a pile of other things.
More details about Geolocation API Specification.

@font-face

Add support for the CSS @font-face property. This property allows you to specify a true type font file that includes a specific font you want to use to render a web page.
More details about @font-face

Video and Audio

Include support for the <video> and <audio>elements. This beta includes support for the OGG Theora and OGG Vorbis formats on all platforms

And more…

Fawnt: High Quality Font Collection

Choosing right fonts during the design process — in some cases — can be tiring. The reasons may vary like lack of font collections, too many similar types, etc. Having numerous fonts installed probably a good thing. But, for some people, it’s probably frustrating having too many fonts. I myself do not have many fonts installed. I just install some fonts I considered as nice fonts. If I need certain fonts, I install them.
But, where to find good font collections? Here is one of the resources. It’s called Fawnt. The site described Fawnt as a font resource for designers, developers, and anyone that appreciates the web’s highest quality fonts.
Fawnt Logo
You can find thousands of fonts there. To save your time, you can start from top rated font page. Not your favorite? No problem. You can also browse by letters, or by category. Simple! So, what’s your favorite font?

Leave your contents naked, undressed

Manekin picture
When we post an entry in our blogs, we do some content formatting. For example, you use <strong>, <em>, etc. But, you probably ‘beautify’ your content using another methods. For example, I see blogs when they use inline formatting rather than using stylesheet. In its post, I can see something like this:
<font color="red">Vestibulum ante ipsum</font> primis in faucibus orci luctus et ultrices posuere cubilia Curae; <font size="18">Cum sociis natoque penatibus</font> et magnis dis parturient montes, nascetur ridiculus mus.
I will stop here. I am sure you know what I mean here, right?
“What’s wrong with that? The output is fine!”. Exactly, you can have exactly what you want right now. But what if we bring this to a next level?
Long time ago, I had a friend asked me to help him on redesigning a blog. He wanted to have dark theme. When he asked for a help, he used a ‘white’ theme. Sounds easy, right? Well, it should be easy, IF he left his content unformatted. What made it more difficult was that the titles also had ‘style’.
For example, in a blog template, you will see something like this (default):
<h2>Your title goes here</h2>
And, what I saw was:
<h2>Your <font color="red">title goes</font> here</h2>
It might not be a “nightmare” if you do not have many posts. But, what if you have many posts? What if you have hundreds of posts? In some cases, I still use inline formatting, as long as ‘the content will be fine when I use another design’.