Do powiększenia tekstu używam:

[HTML] pobierz, plaintext 
font-size: 30px;
 -webkit-transition-property: font-size;
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: 0.5s;
[HTML] pobierz, plaintext 

Jednak powoduje to rozjechanie się strony.
Czy istnieje możliwość powiększenia tekstu taka aby nie wpłynąć na resztę strony ?

co to znaczy że powoduje rozjechanie strony?

Przesuwa zawartość w prawo i w dół ponieważ zajmuję taki powiększony tekst więcej miejsca.

to znaczy, że w CSS coś jest skopane. Np. możesz mieć jakieś position absolute czy cokolwiek. Bez przykładu jak ci się rozjeżdża i w którym miejscu to można gdybać... wrzuć na jsfiddle.net kod jak wygląda problem i css.

To nie jest skopany css tylko logiczne zachowanie. Jeżeli początkowy element zwiększa swoją szerokość to automatycznie początek elementu obok przesuwa się w prawo o tyle ile nastąpiło przesunięcie.
Tutaj przykład:
http://jsfiddle.net/QUmkL/

Ja chciałbym np żeby tekst wjechał na ten kwadrat nie przesuwając go. Tak jak to się dzieje przy skalowaniu .

Nie testowałem, bo nie ogarnąłem w pełni CSS, ale może mógłbyś spróbować pomanewrować wartością z-index dla elementu (przy :hover i bez)?

Pomysł dobry ale niestety dalej przesuwa obiekt obok.

Bo aby stosować z-index należy mieć box wypozycjonowany absolutnie (position:absolute;). Opierając się na przykładzie z jsfiddle, musiałbyś kropce dać odpowiedni margines od lewej, żeby nie spadła do lewej, a tekst musiałbyś umieścić w konkretnym miejscu ustalonym przez left/top/right/bottom od nadrzędnego relativa i dodać mu ten rzeczony z-index.

Bez pozycjonowania elementów, rozwiązaniem w czystym CSS byłoby też nałożenie elementów za pomocą marginesów ujemnych. Takim jednak elementom nie ustawisz z-index, nakładają się one wtedy po prostu według kolejności wystąpienia.

Jeśli nakładania miałoby nie być, wystarczyłby max-width/max-height i overflow: hidden, jednak to by Ci mogło ucinać literki.

No to umieść to w divie, który ma z góry określoną szerokość i wysokość.