Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [CSS] Make titles look better with a simple piece of CSS
New Posts  All Forums:Forum Nav:

[CSS] Make titles look better with a simple piece of CSS

post #1 of 9
Thread Starter 
I'll jump right into it.

I think titles on websites and other important words look pretty bad. This is sometimes because the letters are bunched up. Maybe like this:

http://jsfiddle.net/FUkgC/

However, using the letter-spacing condition like this:
Code:

letter-spacing: PIXEL GOES HERE (usually not more than 5, or else it starts to look stupid.)


This increases the spacing between the letters. By default this is 1px. So lets see what 5px letter spacing looks like:

http://jsfiddle.net/8Vhwu/1/

It just adds a little bit extra to make the text look a little bit nicer. This can be used in all text, although I only recommend using it for titles and the likes.
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #2 of 9
Your first example is not bunched up at all, that's how a header should look. Generally the larger you make your header, the smaller you'll want to set the letter spacing in text (in the negatives). The second example of a 5px letter-spacing looks awful, no offense. The letters are starting to look like they're separate words because they're so spaced out. Maybe it's because you're using Arial at its normal weight, I'm not sure but it looks wrong to me as a web designer.

Here are some good examples of page headers:

home_page.png

cwt.png

littlesnapper.png
post #3 of 9
Thread Starter 
Quote:
Originally Posted by ImmortalKenny View Post

Your first example is not bunched up at all, that's how a header should look. Generally the larger you make your header, the smaller you'll want to set the letter spacing in text (in the negatives). The second example of a 5px letter-spacing looks awful, no offense. The letters are starting to look like they're separate words because they're so spaced out. Maybe it's because you're using Arial at its normal weight, I'm not sure but it looks wrong to me as a web designer.
Here are some good examples of page headers:
home_page.png
cwt.png
littlesnapper.png

I agree it does, I've only used it on a few fonts, but for some reason I couldn't get Google Web Fonts to work on JSfiddle. It looked good one those, but not on Arial. I was going to use something slightly better like Calibri, but just left it.

Thanks
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #4 of 9
Quote:
Originally Posted by joshd View Post

I agree it does, I've only used it on a few fonts, but for some reason I couldn't get Google Web Fonts to work on JSfiddle. It looked good one those, but not on Arial. I was going to use something slightly better like Calibri, but just left it.
Thanks

Google Web Fonts work in jsfiddle, just throw the tag that Google provides in the HTML section.

But yeah, the right font changes everything. smile.gif
post #5 of 9
Thread Starter 
Quote:
Originally Posted by ImmortalKenny View Post

Google Web Fonts work in jsfiddle, just throw the tag that Google provides in the HTML section.
But yeah, the right font changes everything. smile.gif

D'oh, forgot to use that, lol. Thanks again
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #6 of 9
Personally I think bunched up makes more sense as you have a larger type face so you need to retain some space for larger titles.

[edit]
changed my mind, my titles did look marginally better with +1 spacing
Edited by Plan9 - 10/12/12 at 1:36am
post #7 of 9
Oh so THAT's why I stopped doing web stuff tongue.gif
My System
(30 items)
 
"Zeus"
(13 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i5 2500K (4.5ghz @ 1.320v) Gigabyte Z68X-UD3R-B3 MSI R7970 Lightning Corsair 16GB (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Crucial M4 128GB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 7 Ultimate 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2212HM Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Microsoft IntelliMouse Optical  XTRAC Ripper XXL 
AudioAudioAudioAudio
Westone W3 IEMs RE-272 IEMs Shure SE-215 IEMs Schiit Bifrost DAC 
AudioAudio
Schiit Asgard 2 amp HiVi Swan M50W 2.1 
CPUMotherboardGraphicsRAM
Intel Core i7 950 GA-X58-UD3R Radeon HD 5450  24GB Corsair @ 1333mhz 
Hard DriveOSPowerCase
4x WD Cavair Red 1TB in RAID 0 Windows Server 2008 R2 x64 Corsair HX-520 LianLi LanCool 
  hide details  
Reply
My System
(30 items)
 
"Zeus"
(13 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i5 2500K (4.5ghz @ 1.320v) Gigabyte Z68X-UD3R-B3 MSI R7970 Lightning Corsair 16GB (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Crucial M4 128GB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 7 Ultimate 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2212HM Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Microsoft IntelliMouse Optical  XTRAC Ripper XXL 
AudioAudioAudioAudio
Westone W3 IEMs RE-272 IEMs Shure SE-215 IEMs Schiit Bifrost DAC 
AudioAudio
Schiit Asgard 2 amp HiVi Swan M50W 2.1 
CPUMotherboardGraphicsRAM
Intel Core i7 950 GA-X58-UD3R Radeon HD 5450  24GB Corsair @ 1333mhz 
Hard DriveOSPowerCase
4x WD Cavair Red 1TB in RAID 0 Windows Server 2008 R2 x64 Corsair HX-520 LianLi LanCool 
  hide details  
Reply
post #8 of 9
Thread Starter 
Quote:
Originally Posted by tompsonn View Post

Oh so THAT's why I stopped doing web stuff tongue.gif

Lol. Also, thanks for 200th Rep thumb.gif
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #9 of 9
Quote:
Originally Posted by joshd View Post

Lol. Also, thanks for 200th Rep thumb.gif

For the record most of my guides here (not programming topics) have wider letter spacing through the whole thing. I find it is much easier to read the long blocks of text that way.
My System
(30 items)
 
"Zeus"
(13 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i5 2500K (4.5ghz @ 1.320v) Gigabyte Z68X-UD3R-B3 MSI R7970 Lightning Corsair 16GB (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Crucial M4 128GB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 7 Ultimate 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2212HM Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Microsoft IntelliMouse Optical  XTRAC Ripper XXL 
AudioAudioAudioAudio
Westone W3 IEMs RE-272 IEMs Shure SE-215 IEMs Schiit Bifrost DAC 
AudioAudio
Schiit Asgard 2 amp HiVi Swan M50W 2.1 
CPUMotherboardGraphicsRAM
Intel Core i7 950 GA-X58-UD3R Radeon HD 5450  24GB Corsair @ 1333mhz 
Hard DriveOSPowerCase
4x WD Cavair Red 1TB in RAID 0 Windows Server 2008 R2 x64 Corsair HX-520 LianLi LanCool 
  hide details  
Reply
My System
(30 items)
 
"Zeus"
(13 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i5 2500K (4.5ghz @ 1.320v) Gigabyte Z68X-UD3R-B3 MSI R7970 Lightning Corsair 16GB (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Crucial M4 128GB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 7 Ultimate 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2212HM Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Microsoft IntelliMouse Optical  XTRAC Ripper XXL 
AudioAudioAudioAudio
Westone W3 IEMs RE-272 IEMs Shure SE-215 IEMs Schiit Bifrost DAC 
AudioAudio
Schiit Asgard 2 amp HiVi Swan M50W 2.1 
CPUMotherboardGraphicsRAM
Intel Core i7 950 GA-X58-UD3R Radeon HD 5450  24GB Corsair @ 1333mhz 
Hard DriveOSPowerCase
4x WD Cavair Red 1TB in RAID 0 Windows Server 2008 R2 x64 Corsair HX-520 LianLi LanCool 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [CSS] Make titles look better with a simple piece of CSS