Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: small-caps, the first letter is a bit bolder

Tags:

html

css

fonts

Is there a way to make the First letter a bit more thinner or vice verca? Please see the image and css provided.

css:

table.form td {
    padding: 10px;
    font-family: "Open Sans";
    font-variant: small-caps;
    font-size: 15px;
}

enter image description here

As you can see the first letter of each word which is capitalized is a bit more black/bolder

like image 917
RnD Avatar asked Nov 02 '22 07:11

RnD


1 Answers

For the first letter of each word not.

But you can for the first letter in the td element using the :first-letter pseudo selector

For only enlarging the first letter of each word you could use the text-transform:capitilize

Demo with both tricks : http://jsfiddle.net/gaby/8KjT5/1


Alternatively if using jquery you could use the Lettering.js plugin

Calling it with

$(function(){
    $('table.form td').lettering('words');
});

combined with the css

table.form td span[class^="word"]{
    display:inline-block;
}
table.form span[class^="word"]:first-letter {
    font-weight:bold;
    font-size:17px;
}

you get the desired result as seen at http://jsfiddle.net/gaby/8KjT5/3/

like image 52
Gabriele Petrioli Avatar answered Nov 08 '22 09:11

Gabriele Petrioli