Set two values in one cookie

I change the contrast on my site by clicking one of the two "a" links and change font-size by clicking one of the three "a" links. I change the contrast by adding/removing a new class to/from the body.

Question: How to set present contrast and font-size in one cookie ? I want to also save changes when user change subsite... I'm using jquery-1.2.3...

HTML:

<div id="contrast">
<ul>
   <li><a href="#" id="first_contrast" class="con1">a</a></li>
   <li><a href="#" id="second_contrast" class="con2">b</a></li> 
</ul>        
</div>

<div id="font">
<ul>
<li><a href="#" id="one" class="fon1">c</a></li>
<li><a href="#" id="two" class="fon2">d</a></li>
<li><a href="#" id="three" class="fon3">e</a></li>  
</ul>        
</div>

jQuery

$(document).ready(function(){
if($.cookie('f')) {
    $('body').css('font-size', $.cookie('f')); 
}
if($.cookie('t')) {
    $('body').addClass($.cookie('t')); 
}
$('#one').click(function(){
    $('body').css('font-size', '60%');
    $.cookie('f','60%', { path: '/', expires: 10000 });
});
$('#two').click(function(){
    $('body').css('font-size', '72.5%');
    $.cookie('f','72.5%', { path: '/', expires: 10000 });
});
$('#three').click(function(){
    $('body').css('font-size', '85%');
    $.cookie('f','85%', { path: '/', expires: 10000 });
});
$('#first_contrast').click(function(){
    $('body').removeClass('highcon');
    $.cookie('t','main', { path: '/', expires: 10000 });
});
$('#second_contrast').click(function(){
    $('body').addClass('highcon');
    $.cookie('t','highcon', { path: '/', expires: 10000 });     
});
});

via Chebli Mohamed