Tag: typography

Free fonts for use on web are quite useful for the professional or student web/graphic designer using font face css and knowing where to find free fonts to use in your designs is even better! As a man who believes sharing in knowledge with others I have compiled a list of websites with varying free fonts for use on web below. I have also added a few where you have to pay and a couple of other tools for those who are wanting to develop websites to the latest html5 and css3 standard. If you know of any others please feel free to include it in the comment box below the post.

Free fonts websites

Please check that the fonts you are downloading are suitable for web before you use them, I know most of you will understand this but for those just starting to learn about web design check that the font will be a) compatible with all browsers and b) not slow down your site considerably.

Fontsquirrel

So you want to download fonts for free, well then fontsquirrel.com is a great starting point! A font on this site range from the fancy fonts, handwritten fonts to sans serif fonts. You can type in some text to their website and see font examples with each type face.

font files

The league of moveable type

free cool fonts are available on the league of moveable type, check them out, they believe in freedom of design!

cool fonts

Google Fonts

Google web fonts are totally free and really gaining in popularity. When choosing a font from the google fonts website make sure that its size isn’t going to effect the performance loading speed of your site. Google have also gone to the trouble of comparing different fonts with the google fonts making it easier to see google font combinations as not every font will match easily and it might look quite strange if too different but also if they are too similar this can be a problem also. google fonts google fonts download google fonts

NOT free fonts for use on web

Although its great getting free fonts sometimes paying a little fee can help you get fonts that really perfect the look and feel of your website’s brand image. Obviously there is is only so far free fonts can go and sometimes paying just a small fee for a custom font may not be so bad especially if you have many clients. The following websites are fee based but still worth a look.

Typekit

Fontdeck

Fonts.com

Webtype

Webtype is another place where you can download fonts for a fee.

http://www.webtype.com/

Other things to consider when selecting fonts for use on web

There are several things you must think about when selecting the fonts you use in your design and these are as follows : –

• Readability
• The mood the fonts give
• Font Compatibility
• Tracking/letter spacing
• Vertical Rhythm

Readability

Readability is all about how easy it is to read the font. At the end of the day it is important that the user feels that they can read the font easily, if they can’t then its kind of defeating the object of the task at hand. Make sure the free font you choose is easy to read.

The mood that the font gives

Even though readability should always be the number one reason for choosing a font ( in my opinion ) different types of typography give a mood or feel. Ask yourself is the font you have chosen given the appropriate mood or should you keep on looking for an appropriate typeface?

Font Compatbility

Font compatibility is also an issue, the modern way of typography expects two or even three different fonts to sometimes be used on a website. Making sure these fonts are compatible is really important. When I talk about compatibility I am talking about how they blend together. It is said that two font types shouldn’t be too different but at the same time they musn’t be identical either, there needs to be a good balance and on the likes of the Google Fonts website they give some suggestions of how you can pair certain fonts together.

Tracking/letter spacing

Tracking or letter spacing of a font is also important, if it is too close together it can look too cluttered and if it is too exposed it can be hard to read. I suggest that having a large space between each letter should only be used in titles if possible.

Vertical Rhythm

Vertical Rhythm is the hidden lines that make up a composition in a piece of writing. By using a vertical rhythm you will create a better UX and more likely to get the user to read your text. To find out if your website has vertical rhythm you can use a free bit of code from this website basehold.it

Earlier last year I did make another blog post about free fonts for web. Please visit the blog post here for more suggestions. I hope you find this post useful, please do share it and feel free to leave a comment in the box below.

Related articles across the web

• Web Design Calendar 2015
• Typecast – A Gift of Web Design & Better Web Typography
• Marketing yourself online for tradies and specifiers
• Rotating Words using CSS3 Animations
• 10 Web design trends you can expect to see in 2015

Why can’t I use heading tags to make my text bigger?

Heading tags have a very specific role, they are to help the user ( and search engine spiders ) understand what the topic of the paragraph sitting below that header is about. The larger the header (i.e. Heading 1) the more importance that heading has to the search engine spider and usually it is a large indicator to the user what the page is about too.

If you decide you want to use heading tags to increase your font size then you are creating a humungous title and search engines don’t like that and it will push you down the organic search results.

Don’t be a DIV! Increase font size with CSS

When you start really getting into updating your website or blog you want to do things faster and faster to fit more and more into your 24 hour day, even 24 hours isn’t enough time to do everything so you start to cut corners and standards get effected.  Don’t feel bad about it, I’m a victim of  this myself!

Instead of rushing your layouts and content creation on your site simply spend ten minutes setting up some divs so in future you can repeat the div.

What is a DIV?

A div is a html tag that allows you to add style to a part of text with CSS coding. Don’t worry if you don’t know much CSS I am going to show you the one this blog post is about, font sizes and line spacing.

<div id=”nameofdiv”> A div will look like this, you need to ensure you are in html mode when adding tags otherwise they won’t work.All Div’s ( and html code for that matter ) end with a closing tag like this</div>

There are two different types of Div.

• Class
• ID

You use <div class=”nameofdiv”> when you specifcy a style that will be reused by a set of web elements.

You use <div id =”nameofdiv”> when you want one web element to have its own unique style.

You can probably guess but the one we want to use is the “id”  to change the font size of EVERY introduction paragraph to a page.

Step by step guide to using <Div id=””></div>

1. 1. Give your div id a name but something useful and memorable like “firstpara”so it will look this <div id=firstpara”>.
2. 2. Next you need to add some CSS Styling, most websites if setup correctly will have an external stylesheet so locate it and add the following code.

#firstpara {

font-size:20px;

line-height:110%;

3. Save the stylesheet and apply <div id=”firstpara>The first introduction paragraph here</div> and save the page. Your style should now be applied.

Still stuck on CSS? A total novice? You have a few options…

The free option

http://www.w3schools.com/ is the free option and was set up to make learning to code websites have a standard design level so that users get the best experience possible.

The cost but advanced guides

I am a user of online platforms like Lynda and Treehouse because they are regularly updated and give the latest technological advances so you can keep advancing your skills or learn a new skill you may not have had before but wanted to learn as well as being structured in a way that is helpful and easy to manage in terms of learning.

I hope this blog post has helped you to increase font sizes correctly, (you may have noticed I did a little bit of styling at the start of this post to show an example) if you get suck or have any questions please do not hesitate to leave a comment below I am happy to help.

Getting the right typography for your graphic design work is really important, the standard fonts that come with a computer isn’t great for creatives and so sites where you can download free fonts and typography ( if you don’t or can’t design your own ) is really important. In this post I give you 10 links to free fonts websites. I recommend you bookmark the page so you always have this resource available to you.

[divider style=”1″]

1. Dafont.com

dafont.com is a great little website that regularly updates with free fonts that can be used in many creative projects. Before you go ahead with downloading a font make sure you have read the license in case you are not allowed to use the font in commercial work or you could land yourself in trouble from the creator.

2. Typekit.com

Typekit is a website from Adobe that provides fonts for use on websites. It is free, technically, for only one website using 2 of the fonts otherwise it costs some cash but it s a good place to get some really well designed typefaces for your web designs.

3. 1001freefonts.com

This site probably started with 1001 free fonts when it was launched because I believe it has more than 1001 fonts nowadays! Check it out, you are spoilt for choice, be warned though, some links ( particularly on the menu bar ) open new links to fonts to purchase! Cheeky sneeky sales technique 😉

4. Font Squirel

Font Squirrel is another great little website that regularly updates with free fonts that can be downloaded for free but again check that the typeface you are downloading has a license for free use before considering using them in commercial works.

5. Urban Fonts

Not only can you find lots of free fonts here but you can ALSO get free dingbats, you know, those typeface that look like little vector images? A very useful font site I think you will find!

6. Font Fabric

Warning! Not all fonts on this website are free fonts. The owner of the site has been a good chap ( or chapess! ) and shown a little red free icon in the corner of the image to not confuse things. That is always useful for the free seeker in us.

7. Fonts2u 

This website has a very similar layout and design to dafont.com so shouldn’t be a problem when you are looking for free fonts that work with your design work. Not only this but there are so many fonts! A great resource of fantastic typography this is.

8. PC Fonts

Are you still reading these descriptions about free fonts? Just visit the sites folks and make sure to use the bookmark feature so whenever you need free fonts you know where to come. 🙂

9.  Fonts for Web

Are you the owner of a wordpress CMS website? You are going to love this site then! Not only are these fonts free but they are also compatible with a plugin made for WordPress sites to make applying the fonts to your pages simple. I haven’t actually tried it out yet but it sounds like a great concept to add that extra bit of personality to your site.

10. a to z Fonts

On this site there is no messing! It clearly stats that you will find 100% free fonts, very useful if you want to make sure you aren’t breaking copyright laws.

[divider style=”1″]

The typography you decide to use in any part of your graphic design work has incredible psychological effects on the viewer. Whatever the message is you are portrating the typography can re-enforce the feeling of the product or service you are trying to advertise so make sure you either a) find a typeface that works well with the message you want to communicate or b) sit down and design your very own font, probably the best way of getting a free font and adds a truly personal touch to your work.

What is your favourite font and what is your least favourite? Please leave a comment in the box below.