É muito fácil definir em um campo de texto quantos caracteres o usuário pode digitar, para isto, basta adicionar na tag input o atributo maxlength="50" e o usuário não consegue digitar mais de 50 caracteres naquele campo. Isso é ótimo para limitar campos e manter tudo organizado, assim nada sai de controle dentro do banco quando se define uma quantidade de caracteres para um atributo VARCHAR(50), por exemplo.
Contudo, isso é pouco intuitivo. Neste artigo vou lhe passar um simples código onde você pode inserir em seu projeto um contador de caracteres, onde o maxlength será respeitado e a cada nova inserção de caracteres dentro do campo de texto, dinamicamente, os caracteres serão contados e exibidos ao usuário.
Veja um exemplo do resultado final:

50 caracteres restantes

Utilizando o bootstrap ou qualquer CSS de sua preferencia este recurso fica bem discreto e eficiente na sua página.
Para utilizar este recurso, basta utilizar o seguinte código Jquery:

$(document).ready(function(){
    $('.char-count').keyup(function() {
        var maxLength = parseInt($(this).attr('maxlength')); 
        var length = $(this).val().length;
        var newLength = maxLength-length;
        var name = $(this).attr('name');
        $('span[name="'+name+'"]').text(newLength);
    });
});
	

Com isto, basta inserir no campo html que deseja fazer a contagem de caracteres, a classe char-count e também, no lugar onde irá inserir o número contador, um campo do tipo span com o mesmo nome do elemento que deseja-se contar os caracteres. Eu defini este padrão, mas basta alterar o Javascript caso prefira outro. Veja o html do exemplo acima:

<textarea style="width:400px;" name="txtArea" class="char-count form-control" placeholder="Digite até 50 caracteres aqui dentro." maxlength="50"></textarea>
<p class="text-muted"><small><span name="txtArea">50</span></small> caracteres restantes</p>

Lembrando que o script apenas conta a quantidade de caracteres, mas quem limita a contagem do campo é o maxlength do input.