Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Typography Confusion

Featured Replies

Hello Guys

 

My Typography skills have always sucked. In fact I didn't even know what Typography was.

 

After doing some research (correct me if I'm wrong) I found that typography is simply using Text and Different Font Styles to Aid in the Design of the website and make the website stand out.

 

However I'm slightly confused. What if the fonts I choose are not present on the user's computers ? (in fact I'm pretty sure most users won't have the fonts I choose) This would mean all the hard work I put into typography was for nothing !!

 

Or am I missing something ?

 

I would greatly appreciate some help.

 

Thank You.

if they are not on their computer then they won't see what you want unless you use something like fontface, google's font thing or cufon.

 

This is useful to know what is normally installed http://www.typetester.org/

  • Author

Thanks Zed

 

But I'm not sure what you mean ! Are you saying I should use Free Fonts only ? (e.g. fonts that can be downloaded from FontFace or DaFont ?

 

This still doesn't solve the problem ? I doubt it the people that visit my site will go and download a special font just to view my site the way I want .. you know what I mean ? :(

Fonts have got a lot easier to code recently as all the major Windows browsers process @font-face (all IE versions, Firefox, Opera, Safari and Chrome).

See http://www.wickham43.net/css3.php#font-face

and download a kit from hundreds here:- http://www.fontsquirrel.com/fontface

 

Viewers don't have to download the font as it's downloaded from your server in a style or stylesheet.

zed can you not use the custom @face-font? Well I know that you can, but is there a reason you aren't suggesting it? Is it frowned upon?

 

Anyway this is how you do it if it's the way you want to go. If you upload the .ttf to where you are declaring the font(or sub folders if that's where you've put it.)

 

You would then do this in your css

 

@font-face
{
   font-family: my_font;
   src: url('http://www.my_website.com/my_font.ttf');
}

p
{
   font-family: my_font;  
}

 

However this won't work in IE, you need to convert the .ttf to .eof

 

You can do that here

 

http://ttf2eot.sebastiankippe.com/

 

Once you have done that, you need to declare the .eot in your css too

 

So your css will now look like this.

 

@font-face
{
   font-family: my_font;
   src: url('my_font.eot');
   src: local(my_font), url('my_font.ttf') format('opentype');
}

p
{
   font-family: my_font;
}

 

You can look at the article here

 

http://symphony-of-dot-net.blogspot.com/2010/03/making-css-custom-font-works-with-ie.html

  • Author

Ahh Cool Now I get it !! I didn't even know this font face thingy existed in css !! VERY COOL.

 

Thanks j05hr and Wickham

Thanks Zed

 

But I'm not sure what you mean ! Are you saying I should use Free Fonts only ? (e.g. fonts that can be downloaded from FontFace or DaFont ?

 

This still doesn't solve the problem ? I doubt it the people that visit my site will go and download a special font just to view my site the way I want .. you know what I mean ? :(

 

No, what I was saying is that if you want to use other fonts, free or not, then you will need to do something more than you're doing now.

 

@J05hr What is face-font? ;) I mentioned fontface in my reply. The reason I've used cufon in the past and not fontface is that up until recenlty Firefox didn't support it so if someone is using an old version of their browser then you're back to square one.

Of course other techniques rely on javascript but at some point, like so many things with web development, you have to make a decision with the Luddites out there, and go with what you want to do.

The art of Typography doesn't nescasarily mean using custom fonts. You can manipulate any font, be it with leading, size, direction, whatever. The main thing is using type to get something that looks good. You can have two paragraphs written in Arial, one might look plain and boring, maybe even bad, the other could be styled in a way that looks alot different and really great. Line height, letter spacing, font sizing, color, character widths, etc. are all part of typography.

 

It's a subject I've not even scratched the surface of yet and I can't wait till I do. The web would be nothing without text and making it look good is quite high on my priority list.

 

Take a look at this post to see just how great text can be.

 

Hope that helped,

~evu.

  • Author

Thank You All, THat helped a lot Evu.

 

Thank You.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.